// The Lean Mean CSS Trimming Machine
// Mar 20th, 2008 & filed under CSSI’m not the world’s greatest coder. Far from it. In fact, in comparison to those who really know how to code, I’d say I’m among those who just know how to to get by. Those who are great coders, can innovate new ways to do things. That’s not me. I’m just a ‘monkey see, monkey do’ kind of coder.
I’m not ashamed of it. We’re all given to different things. I’m a baby when it comes to my life as a web designer, and I’d much rather spend my time designing, than coding. Having said that, I don’t ignore code. In fact, I’m continually trying to improve on my knowledge.
Noticing the ignorance…
Yesterday, I was contacted by someone to edit a WordPress theme for them to their liking. Editing other peoples work isn’t favourable in any profession (unless you’re an editor), but as long as the instructions of the client are actually improving the look of the theme (in this case it was), it’s not so bad.
Now the theme was one from a highly respected WordPress designer/coder, but it’s a fairly old one I suppose. Nevertheless, as I looked a the code, I saw something which you’ll see in most designs (even my own); CSS bloat!
A True Annoyance in Web Design
Anyone who has ever tinkered with a little CSS, will know the feeling of checking a design in other browsers, only to find that you’re beautiful creation looks like a jumbled mess in IE6 (or some other culprit). It’s infuriating.
Often, the issues are margin or padding related, and one of the reasons this happens is because of the differences in the default stylesheet within each browser. So, we find ourselves needing to add padding and margins to every element in our stylesheet.
This is what I found in the theme I edited yesterday. But, it doesn’t have to be this way…
Enter, The Universal Selector
Sounds like the title to a corny action movie (as others have noticed), but, in actual fact, it’s a powerful selector in the CSS2 world.
Now, this selector can be used for any number of things, and I’ll list a couple of resource links for you at the end. But, what I want you to see, is the power of this selector to help all browsers to play by the same rules.
The selector is denoted by an asterisk, and if you place the following line of code at the start of your CSS, you will remove the default browser margin and padding on every element, negating the need to include it in any element, except where you need to have something other than the default:
* {
margin: 0;
padding: 0;
}
Using the Universal Selector in this way, at the very least, helps you to tidy up your stylesheet. It’ll also mean discrepancies may be more likely down to your stylesheet, than the browsers.
I’m not very good at technical tutorials, but I hope this article may lead you on to explore more about the Universal Selector, and how it can really help trim down your stylesheets.
Articles written by others:
Universal Selector - An easy to digest break down of what it can be used for.
Using the Universal Selector - Two primary and powerful uses explained.
Edit: Norlick has indicated that using the universal selector in this way, might not be the best option. For the mean time, I still think it’s the simplest, best option. However, Eric Meyer has a great article on why he does not use the universal selector to reset everything, and a follow up article which explains what he does instead, so I might have to rethink my practices.
Its not actually a good idea to use the asterisk, because it places unnecessary strain on the browser, especially if the user browses with a bunch of tabs (like moi).
Instead, its better write down the selectors that you dont need to write out a margin or padding for, like so…
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding: 0;
border: 0;
}
Then go along once you’ve finished coding and remove everything that you set a margin and padding for later on in the stylesheet.
Norlick - “Its not actually a good idea to use the asterisk, because it places unnecessary strain on the browser…”
I have never come across that thought before, I must admit. I just tried to search for an article to support it, but to no avail. What makes you say it, Norlick?
I first came across doing this in someone elses stylesheet. I never paid much attention to it. But, when I read it in CSS Mastery, I adopted it.
A google search turned up this…
http://cssbeauty.com/skillshare/discussion/2204/#Item_2
At first, the universal selector reset was what everyone used, which is probably why you found an article or two promoting it, and saw it in use on other sites, but a few skilled designers found a number of faults in using it, and now the best way seems to be the one I listed above.
Its a pretty small thing either way I guess..
Norlick - Thanks for that my friend. It led me on to dig a little deeper, and I’ve now added a note to the bottom of the article.
I’ve never found zeroing everything to be a problem, and like you noted, it’s a fairly small issue. I don’t think it could be classed as *bad* practice to do what I suggested in the article, but then I’m just learning.
Hey, Armen, thanks for the links and thoughts! If I may, I’d like to throw in a couple more URLs related to all this:
* http://meyerweb.com/eric/tools/css/reset/ — the now permanent home for the reset styles, along with notes on why it should be regarded as a starting point.
* http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ — a lengthy, yet still incomplete, exploration of why form elements are so weird from a CSS point of view, which is why I avoid styling them.
I’ll also reiterate a couple of points about (most) resets:
* They’re not just about stripping off margins and padding, but also about leveling the font/text playing field.
* Generally, each person who uses a reset over time starts to modify it to include his or her own preferred defaults—like heading sizes, list indentations, default colors, and so on. So in the end it becomes more of a foundation than a reset.
Yeah well, theres always like a million ways to do the same thing in web design, but I wouldn’t have guessed you as a beginner after seeing both this and the Dietriffic site designs you’ve done, they’re both real eye-poppers and very accessible, which I usually consider a mark of a pro.
Also with Eric Meyer’s CSS Reset — if you intend on using it, I’d recommend removing the inherit styling of fonts, since when I experimented with that, it seemed to ruin ’strong’ and ‘em’ so that they do nothing, which is not exactly desirable.
Ah well, till your next blog.
~ Norlick
That selector isn’t supported in IE6. You’ll have to use a JS framework for that browser.
Chris,
It’s always better to verify before doing such statement. The * wildcard always worked since IE5 and maybe even before.
I still use the *, easier and cleaner imo
Post and comments beg the question — as web developers, do we aim for extremely simple code and place more burden on web visitors and their browsers, or do we take on more burden for ourselves to try to improve the visitors’ experience?
Thanks for all the added thoughts guys.
Dave - I think to use the word “burden” in relation to what the code might (or might not) do to the browser, is a little extreme. What real noticeable difference does it make, that would “improve the visitors’ experience”?
Or maybe you just mean in general? In general, of course the developer should do what they can to create work which will be as accessible and usable as possible.