Are class and id names suposed to describe what its marking up or the element contents?
for example;
img class=“homepage_main_img” or
img class=“sadam_husain_defeated”
will google look at the image class description and notice it ? If so traffic could be lost by simply naming them “home_page_main” if it was the day after the defeat of sadam husain then you would lose alot of traffic by not naming it “sadam_husain_defeated” , just because of an image name, if google does like it.
I think we underestimate the value of inheritance, in many cases the actual uses for class and ID’s and container elements are far too often abused. As for the naming conventions, I always put what the meaning of the information is, if you focus on using what the style will be, you run the risk of making conflicting names and values if your ID says colorRed and you change the color scheme later on (it’s not a big thing but it’s very annoying), also if you describe the elements purpose I believe there’s real issues if you’re expressing behaviour and use it for hooking functionality. Semantically speaking if you explain what the element your attaching it too represents then you have the best of all worlds (as people and search engines alike can seek out code conventions and use them to better represent your information). For example, dividing content into sections like header, footer and content are descriptive to the contents and explain how the page is represented structurally.
^for instance, yes.
*edit oops, this was in reaction to paparts’ post… I didn’t see mrcoda’s post before submitting! : )
But also, the fact that your page is made up of different kinds of tags can themselves be used. I often see something like this:
<h1 id=“title”>The title of the Page</h1>
Since there’s only going to be 1 h1 tag per page, you can call it in the stylesheet with
h1 {
}
and don’t really need #title {
}
though it depends on your situation (what if the h1 on one page has a different style than the h1 on other pages? Sure, a class or id would make total sense there).
Of course, I’ve also seen people put id’s on headers not for CSS hooks, but for Back to Top anchor destinations.
Well, and it’s not as if there’s really a wrong way to do it, so long as you don’t add so many strange weirdo names that it becomes your maintenance nightmare. That’s why most of us have developed our own styles and ways of doing things, because we found how to make it easier for us and our co-workers, and the guy who comes after us in maintaining the code.
As Gary Turner likes to say, code as if the guy who’s gonna maintain your code is a psychopath who knows where you live. : )
*edit now that I see mrcoda’s reply, YES you are doing the right thing by having sensible names, but I would argue that really_long_descriptions don’t necessarily help… it depends on the site, but letting them get too long starts hurting readability. They make more sense on something like a Magento page where there are 15 different kinds of boxes dealing with customer_payment and they all need to be differentiated because it’s a template so future merchants need a hook on every element because they may want totally different styles or something.
That’s the general idea. Although something like left_nav_border looks pretty iffy to me. First of all, what element are you going to give a class called “border” to? Surely you’d have a class of “left_nav” that (among other things) specifies a border. And apart from that, it’s better to use names that describe what an element does, eg “main_nav”, rather than its current styling. If you call it “left_nav” and then later redesign your site so that the nav goes across the top, you’re going to have to go to every page and rename it to “top_nav” (or live with “left_nav” being at the top, which is confusing) and then you’ll feel a bit silly for not going with “main_nav” in the first place, because then you could have kept the same name.
I supose if you split the style sheet up into seprate style sheets for each page you could eliminate some words from the class names as each would only relate to that page, but this would increase server requests and slow things a bit so fits probably better to increase the style sheet by a few words, which is really another topic for discusion.
One of the key advantages of using stylesheets is that you can reuse the same sheet right across your site. Having separate stylesheets for each page would increase server requests and data transfer, and massively increase your workload as you would have to update all of them individually every time you wanted to make a change to the design.
is’nt it about getting an webpage that can be handed over and understood easily. Its about speeding up the communication process between getting a job in and finishing it without having to decypher someone elses shorthand. Or is it about making the new web companies job as difficult as possible so they come back to you. NOT PERSONALLY , i’m trying to make a point here about why I try to name them “handover friendly”. Web development is so in its infancy that we’ll look back in ten years and go, how did we ever manage to sort that lot out ! What a haphazard mess. I allways look at building houses as a goal to aim for. Standard ways of doing things, pencil marks all the same, so the next chippy or plumber can see whats going on, and if you want an extention, the bloke who did the work before has put the joists where you’d expect them to be , so you know where your fixing are going instead of drilling a hole every 20cm to find them. One day there will be web standards , solid , fixed building blocks, like xhtml and css compaired to tables and spacers and dreamweaver code and this blokes code and that blokes code. From the short time I have been on this forum, one things clear, theres really isnt any web standards at all yet, not untill the people who create the pages say to the UI manufacturers, “IF YOU DONT MAKE YOUR BRICKS SQUARE, WE CANT USE THEM” The industry is driven by the manufactures products, not the builders, builders find a material thats not good they stop using it, in the web industry we change all the other materials just to accomodate a less good one, "YOU DONT ADD FLOUR TO SAND AND CEMEMENT AND THEN MORE CEMENT TO MAKE UP FOR IT, YOU JUST LEAVE THE FLOUR OUT OF THE MIX.
I would name my classes closest to the type of content I have. If that content is the title of the article, I would name it class=“title”, that would be a lot easier to remember.
The best way to choose Class and ID names is to look at the purpose, content type or function of the item. This allows you to re-use them across your website, rather than creating a specific set of class-names or ID-names for each page, which would completely defeat the point of using stylesheets.
While Google may take some consideration of class/ID names, it is unlikely to be anything more than trying to pick out navigation menus, footers, that kind of thing - it certainly won’t give any greater importance to a keyword in a class name, for the simple reason that nobody in their right mind would make a design that used keywords in the class names!
so its really home_page_image because i may have homepage_text or something reusable that also homepage. It describes content like another tag i.e. <blockquote> so its semantics based. I think thats the right word. So its like an extention of the xhtml.
e.g. body_author_signiture , left_nav_border , rollover_buttons would all be right and jk_rowlings_signiture , fish_picture_border and pencils_choice_menu for the same classes/id’s would be wrong or not ideal should I say.
I supose if you split the style sheet up into seprate style sheets for each page you could eliminate some words from the class names as each would only relate to that page, but this would increase server requests and slow things a bit so fits probably better to increase the style sheet by a few words, which is really another topic for discusion.
Are class and id names suposed to describe what its marking up or the element contents?
Depends, mostly on how many other elements could share that style.
for example;
img class=“homepage_main_img” or
img class=“sadam_husain_defeated”
I wouldn’t use either, because I’m a Lazy developer. If that image needed to be floated left and have some margins, and if nobody else was floated in quite that way, I’d just give it a class based on what it was rather than the content (esp since, ideally, the content could change to something more recent and keep the same styles).
img class=“main”
main would remind me it’s on the main page, which would remind me of the stlyes I want there. I don’t need to say main_img because the element type is img already.
Search engines do not look at class names unless you are using microformats they understand.
Search engines read alt text as they do any other text, however a study published on SEOMoz states that links whose link text is alt text give marginally less juice (for those who care).
You could call your image img class=“sadam_husain_defeated” and src=“my_dog_millie.jpg” and alt=“Party at Sitepoint this summer!!” and as far as search engines are concerned, you have
We may just have different styles, or you don’t like Lazy coding, but for me those would be
.sig, .border, .buttons (actually for rollovers, I do name those after the content if I’m doing Gilder-Levin, because every li or a in a menu needs a special name.
So home becomes .h, about becomes .a, products becomes .p… something one wouldn’t normally do but here they are restricted to within one element (usually #menu) so it’s ok to read).
I very much doubt it does look at class names but it most likely will read ALT attributes. You should name them something sensible and logical; usually for human readability (the author that is).
It cannot describe the contents as such - I’ll rephrase that it [name] has no bearing on the contents. A CSS expert chooses class names which convey the special purpose of that element.
