css name should be?

Question

i am making style sheet for a website. css style name should be related to website or content?

my website is about web development.is that right to use style name-

#web-development-header

.web-development-company-london-content

or should use

#header
.content

is css style name can help for seo?

Answer 1

Go for content related names - those would be easy to maintain. Longer strings mean longer time to load the page. And CSS style names have nothing to do with SEO.

Answer 2

Choose the content naming convention.

One piece of advice, use names that do not describe visual output because visual output may change and then the CSS class or id name is misleading.

For example, if .redtext changes to blue by the designers, then the class name is misleading and the effort to find and replace is laborious.

I recommend choosing names like .warningtext rather than .redtext.

Answer 3

While at the moment you're building a site for a web development company in london, what happens when you want to reuse the code for a web development company in new york? or what about a craft store in london? It seems trivial now, since you're writing the code, but what if you've got a team? The best practice is to use names that make sense to the page at hand. If you bring the page up on the screen, anybody should be able to identify major components: header, footer, navigation, etc., etc.

While IDs and classes should be descriptive like Christoper Altman posted (.warningtext v .redtext) there's no need to overload them with information (.thisTextAppearsWhenTheUserEntersTheirNameInThePhoneNumberArea is a bit silly) so there's a balance to be struck. Generally as a rule, I try to use the minimum description to specifically tag a section, both to simplifiy my codes appearance and my unhealthy obsession with speed.

In short, if all you need to correctly ID a section is header, then use header. No need to introduce more information if it doesn't have a purpose.

Answer 4

All of the other answers are all great, but don't forget you can also nest CSS, which may give you more flexibility in your naming convention and allow you to use short and simple names:

#header {}
   #header #left {}
   #header #right {}
.content {}
   .content #left {}
   .content #right {}



<div id="header">
   <div id="left"></div>
   <div id="right"></div>
</div>

<div class="content">
   <div id="left"></div>
   <div id="right"></div>
</div>