Because there are so many ways to skin the proverbial cat, as CSS developers, we pretty much have free reign to do things as we please.
While some things in CSS are pretty straightforward (like if you want to add a rollover color, you use :hover), that is not the case with others. In many cases, there is no set way to accomplish a single task in a layout or with regards to some other CSS-based technique.
In such cases, it’s up to the developer to choose what he wants to do based on his own preference, his workflow, his knowledge of CSS, and experience in dealing with certain aspects of the language.
Examples of Decisions That Need to Be Made
Here are some examples of decisions that CSS developers need to make:
<link>tag or@import?- Should I use a reset?
- Should I use a CSS framework?
- Multi-line or single-line declaration blocks?
- Hacks or conditional comments?
- ID or class?
- Should the
<body>tag be my container? - Margins or padding?
- Shorthand or longhand?
- Fluid-width or fixed-width?
- Pixels, ems, or percentages?
- CSS3 or JavaScript?
- “Clearfix” or “overflow:hidden/auto” to clear floats?
- Should I use a larger font stack?
- Should I use min- and max-based properties like “min-width” and “max-height”?
- Should I indent my declaration blocks to match the HTML indentation?
- How often should I insert a comment?
In many of the above listed decisions, the result visually will be exactly the same regardless of which choice is made, again emphasizing the fact that there really are many ways to skin a cat. (Of course, in cases like choosing indenting or single-line CSS, there would be a visible difference code-wise, but not in the actual display of any page.)
Any Others?
I don’t really know what this post is supposed to accomplish other than maybe to remind us of how flexible our craft really is, and how many little decisions we face and decide upon often instantaneously.
This also might serve as a reminder that these options are available, and we shouldn’t get too dependent on a single style of CSS coding.
Are there any other CSS decisions that need to be made that fall under the “either/or” category like many of those listed above?
How many CSS files ?
Should I separate the internal CSSs files or use one big file ?
these are important questions also.
How about, “Do I really still have to make this site work in IE6? Really?”
I ask myself this question every ****** day …
I’ve been doing the same thing. Actually, I’m doing it right now.
I feel that pain.
If Google no longer supports ie6, why should I?
I just don’t waste time on it anymore.
Just run an update…
Completely given up.. I now ask myself if I bother with ie at all :p IE 9 beta soon surely the increase to ie9 will be similar to that of ie8?
How about..
– What’s the smallest/largest resolution size i should accomodate for?
– Do i create a whole new css for mobile browsers or hope the one i’ve done degrades gracefully?
How about an article with pros and cons regarding these “decisions” and how they affect our final product? This would be great!
How about giving some links regarding each of those decisions, as they will be great for designers like me who have not yet choose what to use…
I don’t think you should use hacks OR conditional comments if you’re worth your weight as a developer ;)
I agree. But unfortunately, it’s extremely difficult to avoid at least a few IE6 hacks. Unless you’re just ignoring IE6 altogether.
But what do you think of Paul Irish’s solution, which uses conditionals to create custom markup? I don’t particularly care for that solution, because it encourages creating unmaintainable stylesheets.
I haven’t found that process to result in unmaintainable sheets. In fact, you can do it all in one since it’s classes on the body tag. In my experience, it adds between 5 and 10 CSS rules to a sheet.
I guess my point was that you can avoid that kind of thing altogether just by using CSS that will render the same across all browsers. I don’t think it’s a good thing to encourage different styles for IE6, 7, 8 and 9.
A good CSS developer can get their CSS to work exactly the same in IE7-9 and all the other in-use browsers. The only browser that should need “hacks” or conditionals is IE6, and maybe the odd hack/conditional for IE7.
Below is my personal answer.
* tag or @import?
I generally have 1 link in the html code, and the rest is via import in css.
* Should I use a reset?
I do.
* Should I use a CSS framework?
I dont.
* Multi-line or single-line declaration blocks?
Multi-line.
* Hacks or conditional comments?
Tried to avoid both, but if I have to chose, conditional comments.
* ID or class?
They’re two different things and as you continue to write codes, you will tend to see the pattern that some only exist once per page whereas others may have multiple instances. Really, I dont think this is something one should ponder over. My rule of thumb is ID unless you need multiple instances.
* Should the tag be my container?
This depends on the type of designs you’re doing. Generally, the less markup, the better. If you cant get it working in the body tag, then create your own div container.
* Margins or padding?
This is like the ID vs Class question. They both have their usage and they both serve different purposes. If you want consistent indent in a block, you apply padding to the parent class for example.
* Shorthand or longhand?
Short hand most of the time.
* Fluid-width or fixed-width?
Fluid if possible.
* Pixels, ems, or percentages?
Mixed of em and percentages. If I need to be exact, only then will I use pixel.
* CSS3 or JavaScript?
CSS3.
* “Clearfix” or “overflow:hidden/auto” to clear floats?
I havent come across this much, but I’ve been using clear more than overflow:hidden.
* Should I use a larger font stack?
Have not come across this situation yet.
* Should I use min- and max-based properties like “min-width” and “max-height”?
Yes, I use these quite often in my code.
* Should I indent my declaration blocks to match the HTML indentation?
I tend to have them at the same indent level unless I am using @media
* How often should I insert a comment?
This is quite subjective. I insert comments on where I think is necessary.
OK here are the correct answers ;)
link tag or @import?
– In development, use whichever is easiest for you. In production, obviously you just need one link tag with one CSS file, to avoid too many HTTP requests.
Hacks or conditional comments?
– If you have to use anything, conditional comments. Hack are awful and completely unnecessary.
ID or class?
– IDs are mainly for Javascript. For CSS I would suggest using classes nearly all the time (this helps with specificity too).
I somewhat agree with the link vs @import, however, a possible alternative is to HTTP cache your css.
I use a reset.css file and i @import it at the beginning of my css. giving this file a longer cache time would minimise the need to re-fetch it by the browser.
As for ID or class, I somewhat disagree with the “IDs are mainly for Javascript”. IDs are great for CSS. They’re much more powerful than classes, in the sense that you can greatly customise IDs without worrying that it would affect anything else. One of my great bane of CSS is that sometimes, things just doesn’t turn out the way you expected it, and it’s a pain to debug the CSS.
This is essentially the reason why I kept common styles in classes, while anything specific in IDs. One of the practical examples I have been working on is to have a class calls form-container, which stores generic styles for my xhtml forms, while IDs such as #login-form are being used to specify fixed width, etc.
I understand that while you can duplicate this with another class such as .login-form, and specify your div to be class=”form-container login-form”, but why re-inventing the wheel when you can just use the ID for that exact purpose?
IMO, CSS follows the rule of “less is more”. If I can restrict my css to target only a specific portion of a page, then I’ll gladly do it.