Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: Best practices for using it to help SEO?

Switching from JS navigation to CSS



1:30 pm on Jan 19, 2009 (gmt 0)

5+ Year Member

My company is in the process of switching from a javascript navigation to a CSS navigation, which I understand should be better for SEO. However, I don't know much about CSS. I've read that it's helpful for SEO since it allows you to move important content to the top of the HTML file and it decreases the code to content ratio.

Are there any CSS best practices that will help our SEO and maximize natural search positions for our important keywords?

Any advice would be greatly appreciated.

Thank you!


2:22 pm on Jan 19, 2009 (gmt 0)

10+ Year Member

Correctly done JS menus will not hamper SE's from indexing the pages. There are some very good ones and equally there are some very bad ones.

I would personally never use a JS menu for various reasons but mainly because I start limiting the amount of people who can access my sites.

Probably the easiest way of making a menu is to use an list-item. I say this becuase if you search for CSS menu templates most are created this way. I always use a list-item method because I find it easy to style and simple to configure.

There are no bad practices that I can think of. As long as the code is this kind of simple you'll have no problems:

<li><a href="link.html">Link</a></li>
<li><a href="link.html">Link</a></li>
<li><a href="link.html">Link</a></li>


2:44 pm on Jan 19, 2009 (gmt 0)

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

What about class names and ID names for styling. Are those picked up by any robots? Best practices for CSS is to make the name descriptive of what the item contains. Navigation many times on a large site is dynamic and trying to make any sort of keyword rich selectors is not as helpful from a coding stand point.

For navigational elements or nested elements, like unordered lists, it is common to style the tag and not use a custom selector.

.mainPage .mainNavigation ul{width:300px;}
.mainPage .mainNavigation li{float:left;display:inline;list-style:none;}

instead of


Have people found that using named classes or ids help with rankings or help with disability programs like Jaws? What do people think about always using classes and ids and not using tag selectors?


3:16 pm on Jan 19, 2009 (gmt 0)

10+ Year Member

The ID and class names won't make a single bit of difference to your rankings.

How you code it depends on personal preference really. I tend to flip between:

<ul class="blah">


<div class="blah">

I try to keep the LI's clear of ID's or classes because I sometimes need to style the first/last LI differently from the others. I might also need an active class for the active page. In all these cases keeping the LI's clear make it easier for me to see clearly what's going on.

As I say though, it really is personal taste.


3:23 pm on Jan 19, 2009 (gmt 0)

10+ Year Member

In my cases I would style both as:

ul.blah {}
.blah li {}

or for the latter:

.blah ul {}
.blah li {}


Featured Threads

Hot Threads This Week

Hot Threads This Month