Thoughts on CSS Best Practices
Regardless of what kind of Web development you are doing, you will always need to work with CSS before launching your site. I've been reflecting on best practices in CSS lately. So here is my list of best practices. This is not by any means a complete list or the gold standard for CSS development. This is just what I have learned so far (although I doubt many would find any of these statements controversial). Feel free to add your ideas in the comments.
- Start with 100% valid semantic xhtml. Make your markup describe the page or template you are creating. Invalid markup will create problems, even if one browser is forgiving of invalid markup, another will not likely be as forgiving. Many text editors provide this feature. If nothing else, use the W3C's validator.
- Reset it. Use something simple like
* { margin:0; padding: 0; }to help assure all browser are interpreting your markup the same way. You may even consider using Yahoo's CSS reset YUI library. - Use Firebug: Firebug has revolutionized CSS and Javascript development. Firefox's Firebug lets you click on any element on the page and see exactly which CSS rules apply. It even lets you change, add and remove CSS rules on the fly to test various possibilities.
- Use a CSS aware editor. I've started using MacRabbit's CSSEdit this year. The autocomplete as you type feature alone was worth the $40.
- Get everything perfect in one browser (probably Firefox) first and then test in other browsers.
- Set up an environment where you can test all major browsers quickly across platforms. For me this means running Parallels, Windows XP, and Ubuntu on my Mac. Windows users need to test on the Mac as well (or at the very least test on Safari for Windows). I recently shelled out hard-earned cash for for XP and Parallels - but if you are serious about CSS development, this is necessary.
- Use well established techniques like unordered lists for menus or well known equal height columns techniques. Why reinvent the wheel?
- Be aware and beware IE idiosyncrasies. IE usually causes the most headaches. Know about hasLayout, the peekaboo bug and the like. If you must, feed IE its own stylesheet via conditional comments.
- Use a code repository to allow rollback to an earlier version if you make a mistake.
These things have helped me in CSS development tremendously.
Goodreads Bookshelf
Drupal's Building Blocks: Quickly Building Web Sites with CCK, Views, and Panels
Earl Miles
Drupal 6 JavaScript and jQuery
Matt Butcher
Neuromancer
William Gibson
Semicolons
Add a semicolon at the end of every property even if it is the last one of the style. This way, when you will want to add another one, you will get it right the first time.
I'd like to add some of my
I'd like to add some of my thoughts / best practices:
(4) Use i.e. the eclipse PDT, that gives you auto-completion and auto-formating.
(6) On Linux, use vmware server for your testing-envs. It's free and easy to operate.
and a new one:
Use more than just one css file and @include them where it makes sense. I.e. I usually have a separate color.css where I define all colors.
So far from me...
Rainer
ies4linux
Instead of using vmware server, if you are using linux, you could use ies4linux ( http://http://www.ies4linux.org/ ) or if you are using Mac, ies4OSX ( http://www.kronenberg.org/ies4osx/ ).
Ies4Linux/Ies4OSX allows users to run Internet Explorer versions from 5.0 to 7.0 on Linux or OSX.
I could not get IE7 to work in IE4Linux
thus parallels and XP
Small correction to my last
Small correction to my last message: It's @import not @include, sorry (too much C programming lastly :-))
And a pretty good example for an initial @import is the "css reset" (you'll find lot's about it).
And last but not least: The @imports must be the first statements in your css-file, or else they will be ignored. That's not a fortune and gives us some bad restrictions when structuring code in files.
I still haven't found a
I still haven't found a create CSS Framework to play with, the Yahoo! one is promising but again i hate the naming conventions used in it. yui-name etc.
Reset
Reseting all styles with a star rule is a bit too much for my taste, it brings its own problems sometimes (like on selects in Firefox) and it can make the CSS rendering a bit sluggish on slower computers.
There are other interesting resets apart from the Yahoo UI you link to, like the reset by Eric Meyer.
But my favorite is Initial by Faruk Ateş, It doesn't force you to redefine everything, instead it just sets a few robust default styles.
Test for clients without CSS/JavaScript/vision
A validator will tell you whether your code is well-formed and not using any non-standard or deprecated elements or attributes, but it can't tell you whether your markup is semantically correct.
A useful quick test is to view your site in a text-mode web browser like links or elinks. This will at least tell you that your content is comprehensible without the benefit of CSS, JavaScript, or images, and hence is accessible to the visually-impaired. Remember, the user of arguably the most importance to most websites - Google - is visually impaired.
Harder to test for is whether you have selected the right HTML element for the right purpose. For example a list of links displayed inline is still a list. It may be less work to just stick them in a paragraph, and it will pass an automated validation test, but it's also less semantic metadata that may be useful to you in some way in the future. Are all your headings in heading elements? And do all your heading elements contain actual headings? Are your CSS class and id names semantic ("menu", "author", "last modified", etc.), or presentational ("blue", "large", "left", etc.)?
These are the sorts of questions you just have to keep in your mind while marking up, and there are plenty of instances where there is no definitively correct answer. I find it's useful to be in computer programmer / librarian mode when marking up; what possible machine-executed tasks might someone one day want to do with this information, and what semantic hooks using standard (X)HTML (and possibly microformats) should I provide to make this possible?
Drupal Issues with CSS
Perhaps there is one primary gripe I have about Drupal and using CSS and that's in relation to controlling your class names and ID names.
I'm very new to Drupal and using its template system, however having to style my primary links I noticed that the naming conventions are useful, but they are a bit bloated in most cases.
I agree with your list above, except I don't have a MAC (yet!) so I can't test Windows XP IE6 (The Piece of shit it is), but if I do find issues on IE6 I'll probably put them in an IE.css file and use conditional comments.
I think also a colour.css file is useful especially if your creating generic templates.
I don't like the * selector for a global reset as it causes issues with forms and gives you twice the work.
I still haven't found a create CSS Framework to play with, the Yahoo! one is promising but again i hate the naming conventions used in it. yui-name etc.