Forum Moderators: not2easy
However I noticing that I need to come up with a good naming convention for all the CSS elements.
What do you think is the best way?
Such as:
#nav { some style }
#nav a:link {some style}
#nav a:hover {some different style}
instead of:
a.nav:link {somestyle}
a.nav:hover {some different style}
In the first example, the ID "nav" needs only be assigned to the DIV tag containing your navigation links, where in the second example, the class "nav" needs to be assigned to each and every navigation link.
Not only will this cut down on the number of selector names you need to come up with, but it will also facilitate cleaner semantic code.
Hope that makes sense - I'm still on my first cup of coffee.
I picked up somewhere that you should name your elements descriptive of their FUNCTION instead of their appearance ...
I usually try and make it make sense for both. I also try always to keep it as simple as possible, so its easy to edit 6 months later too....
If it is not too off the thread - rocknbil's post above caught my eye - I have ALWAYS used lowercase for selectors - is there a 'best way' with this - I have seen people use numbers in the selectors too...
ZA
I usually extend that formating convention into JavaScript as well (UPPERCASE for constants, initCase for method names, prefixed_initCase for variables, etc).
As it was mentioned recently, you also want to make sure that you have meaningful class names.
My preference is to name things according to the role the element will play on the page. Instead of:
[pre]
<div class="halfwidthright">
<h1>Title</h1>
<img src="..." class="floatleft" />
<p>...</p>
<img src="..." class="floatright" />
<p>...</p>
<p>...</p>
</div>
[/pre]I would be more inclined to write the following:
[pre]
<div class="calltoaction">
<h1>Title</h1>
<img src="..." class="primary" />
<p>...</p>
<img src="..." class="secondary" />
<p>...</p>
<p>...</p>
</div>
[/pre]There are a number of reasons for doing it this way. The most imporant is content reuse. If you are ever going to be working with a content management system of any quality, then you may find yourself in a situation where something like this (lets say its a marketing blurb that sits among some "real" content) would be managed separately from any given page and included in a number of different places, or that a number of different instances of effectively the same type of markup might be used in very different places. So lets say that when on of these calls to action are used as part of a regular prose page (say the "About Us" page) you want to format this sort of thing floating to the right, 175px wide, with a green background, but if its in a product listing page, you want it to span the whole width have a red background and get a blue border. Or what ever.
If you take my approach, you will have one set of markup to deal with but apply a number of different CSS treatments depending on content.
That leads me to my second suggestion:
Use the Cascade and selector rules aggressively
Often you'll find people who do things like:
[pre]
<div class="homepagecalltoaction">
<h1 class="homepagecalltoactiontitle">Title</h1>
<img src="..." class="homepagecalltoactionfloatleft" />
<p>...</p>
<img src="..." class="homepagecalltoactionfloatright" />
<p>...</p>
<p>...</p>
</div>
[/pre]this is REALLY stupid, but very common. a better approach is to do:
[pre]
<html>
...
<body class="homepage">
<div class="calltoaction">
<h1>Title</h1>
<img src="..." class="primary" />
<p>...</p>
<img src="..." class="secondary" />
<p>...</p>
<p>...</p>
</div>
</body>
</html>
[/pre]This lets me do this:
[pre] .homepage .calltoaction { ... }
.homepage .calltoaction h1 { ... }
.homepage .calltoaction .primary { ... }
.homepage .calltoaction .secondary { ... }
.contentpage .calltoaction { ... }
.contentpage .calltoaction h1 { ... }
.contentpage .calltoaction .primary { ... }
.contentpage .calltoaction .secondary { ... }
.contentpage .product .calltoaction { ... }
.contentpage .product .calltoaction h1 { ... }
.contentpage .product .calltoaction .primary { ... }
.contentpage .product .calltoaction .secondary { ... }
[/pre]
The last thing I would look at is multiple class names. Noone ever does this and its one of the most powerful tools in the CSS toolkit. You have to be careful since IE doesn't handle multiple class names correctly but there still a lot you can do.
Imagine the you have a field for a form marked up as follows. We want to indicate that the field is required (so we can put a * image in the right place) and that it was submitted with an error (so we can color the text red). The simple way is to do the following:
[pre]
<div class="field">
<label> ...</label>
<input />
</div>
<div class="requiredfield">
<label> ...</label>
<input />
</div>
<div class="field_error">
<label> ...</label>
<input />
</div>
<div class="requiredfield_error">
<label> ...</label>
<input />
</div>
[/pre]The css would be:
[pre]
.field,
.requiredfield,
.field_error,
.requiredfield_error { /* Layout the field */ }.requiredfield,
.requiredfield_error { /* position the background image */ }
.field_error,
.requiredfield_error { /* set the font color */ }
[/pre]
This leads to a lot of css that gets duplicated; most people wouldn't even put their CSS this way, they'd do each class separate, which can cause problems if you make a change and forget to update everyone.
A better solution is to do:
[pre]
<div class="field">
<label> ...</label>
<input />
</div>
<div class="field required">
<label> ...</label>
<input />
</div>
<div class="field error">
<label> ...</label>
<input />
</div>
<div class="field required error">
<label> ...</label>
<input />
</div>
[/pre][pre]
.field { /* Layout the field */ }.required { /* position the background image */ }
.error { /* set the font color */ }
[/pre]
This scales better if you have more complex setup than I've shown.
You have to be careful since IE doesn't handle multiple class names correctly
Some specifics might be in order here to curtail confusion.
Modern IE versions (as far back as IE5 on both platforms, at least) support multiple classes of the form:
html:
<p class="one two">...</p>css:
.one{
color:red;
}
.two{
background:blue;
}
This is the most common and, IMO, most useful multiple class declaration.
The syntax that IE chokes on (IE5.x/Mac and IE6/Win) is when the css selector, itself, contains multiple classes. As in...
html:
<p class="one two">...</p>css:
.one.two{
color:red;
background:blue;
}or:
.two.one{
color:red;
background:blue;
}
IE applies these styles to any element containing the LAST of the two classes, even if they don't also contain the first.
Note that if you have a browser that you're not sure about, you can always use a multiple class test page, such as this one [meyerweb.com], to check it's support for yourself.
cEM
Keep them coming.
PS - Maybe a bit a bit off topic, but when do you use the # notation i.e. #button a {some style}?
Yeah, I know it's Netscape 4 and no one cares ... ;)
