Redesign, Part 2: Stylesheet Philosophy
I am not a developer.
After spending five days making a curtain backdrop using ASCII characters and Basic on my IBM PC Jr., I decided childhood was too short and I’d rather be doodling anyhow. Maybe it was the stacks of green-and-white striped paper my dad spent countless nights poring over that turned me off; I’m not sure. Whatever it was, coding and I don’t get along so well.
However, I do get along rather well with most coders (conceptually, anyhow). I love the concepts, just not the syntax. So I really dig talking programming concepts with developers. One of these concepts that I’ve picked up from the developers I’ve spent time with is this: Eliminate redundant code. If you’ve got to do something twice, put it in a function and call to it all places you need it. This not only gives you power and clarity, but it also reduces the amount of code you write and therefore the likelihood of mistakes.
Applying It To Stylesheets
So let’s get right down to it. What does eliminate redundant code have to do with stylesheets?
Plenty. The best stylesheets are well-thought-out and deal with many stylistic changes in a broad, concise way. Bad CSS is akin to micromanagement: you spend so much time styling each individual element that you forget the big picture of how elements relate to each other and inherit properties, resulting in a whole lot of redundancy. (We call redundancy like this bureaucracy when it happens in the government.) Here’s how I broke down the stylesheets for Plasticmind.com:
Press Reset
I almost always begin with a reset CSS file. One speedbump for me when I was first learning CSS was understanding that there are default styles applied by browsers to most HTML elements. Headers get varying font sizes. Lists get bullets. The body gets margin. Anchors get colored and underlined. There’s a slew of minimal styles that browsers apply to HTML to ensure that an unstyled page is human readable. Trouble is, all of these hidden styles can be maddening if you don’t realize this. That’s what makes a reset stylesheet great. It resets everything back to zero and lets you define every style without worrying about mysterious defaults rearing their proverbial heads. My personal favorite is Yahoo’s reset CSS.
One For The Layout, Two For The Look
Next, I decided to take a dual stylesheet approach. My site has a common layout across the multiple sections, so I created an overall shared layout that exists in a common CSS file, while the section specific styles get put into a section specific stylesheet. So, if a particular style will be used in every section, it goes into the common stylesheet; if not, it gets stashed into the section-specific one.
Fixes For IE
Finally, using condition comments in the header of all the sections, I include a “fix” stylesheet for Internet Explorer. This helps the pathetic browser render like every other browser out there (or at least as best it can). Most of my fixes were small, so I opted to keep them all in one stylesheet. You may want to break them up into sections if they’re large; but I’d warn against making too many exceptions for Internet Explorer—they’re a headache to maintain.
Section Specific Styling
Also, be sure to give your body tag an id, especially if you’re using one stylesheet for multiple sections. This gives you the ability to specify styling for one particular section without too much trouble:
<body id="journal">
<div class="entries">
...This lets you then do something like:
#journal .entries {
color: red;
}You can specify any particular element in only that section by prepending it with the id in the body tag. But then, if it’s a section-specific style, shouldn’t that be in the section-specific stylesheet?
Conclusion
The beauty of this approach is that I can now create an entirely new section in almost no time. By duplicating the HTML structure and calling to the common stylesheet, I’m up and running with a fully functional grid. All I need to do to finalize is simply create a section stylesheet to define the colors and background images. Twice the power, none of the redundancy, half the time. That’s a concept I dig.
Be sure to come back for part three of our Redesign series: CSS tricks that make this site tick.
-
- posted on 11 September 2007
- by Jesse
- Comments (2)
- in the chapter, "CSS"
- tagged with css, grid, redundancy, reset, stylesheets
InterAction:
20 April 20082. Tyler:
I had this idea worked up on a draft of my site, hot switchable style sheets. It worked well. I just haven't seen the practical application as of yet for my site. If you want a demo of it give me an email and I'll send you a link.
YourThoughts?
(Minutia)
This entry was written by Jesse on Tuesday, September 11, 2007 at 12:17 AM and appears in the CSS chapter. The previous article was entitled, "Redesign, Part 1: The Logo", and the next entry is called, "Using .htaccess Voodoo For Underscore and Dash Woes". Bookmark the permalink, save it to del.icio.us or Digg it.
GetUpdated
ElseWhere
AllChapters
- 2 articles in the chapter Accessibility
- 2 articles in the chapter Announcements
- 3 articles in the chapter Blogging
- 5 articles in the chapter CMS
- 3 articles in the chapter CSS
- 7 articles in the chapter Design
- 3 articles in the chapter Downloads
- 1 articles in the chapter Gadgets
- 4 articles in the chapter Journeys
- 1 articles in the chapter Miscellany
- 4 articles in the chapter Movable Type
- 1 articles in the chapter Print
- 1 articles in the chapter SEO
- 4 articles in the chapter Social Networking
- 1 articles in the chapter Standards
- 1 articles in the chapter Writing
11 September 20071. LaRosa Johnson:
maybe one of these days i'll take the opportunity to implement something like this in my site
lj.