5 CSS Tips Every Web Developer Should Know About

Published on November 11, 2008 (↻ December 17, 2023), filed under (RSS feed).

Of all the tips this site shares, the following ones may be special. Let’s quickly run through what might be essential for every web developer to know about CSS. Main focus: maintainability, though differently.

  1. Reference only one style sheet in the markup. Instead of including x style sheet references in every document, include one (meaning one) and import any other style sheets from there, or, even better in complex projects (to avoid unnecessary HTTP requests), have that one style sheet generated out of other style sheets.

  2. Specify media types within style sheets, not markup. Do not use the media attribute on link elements—or anywhere in the HTML—but instead specify media types either when importing or through @media rules.

  3. Use appropriate ID and class names. Avoid them, use functional names, fall back to generic or neutral names, and keep them as short as possible but as long as necessary.

  4. Avoid “reset” style sheets unless you customize them. Reset style sheets come with two disadvantages: unnecessary code (mostly due to rules that reset styling of elements that aren’t used at all) and redundant code (due to declarations that later get overwritten). Reset style sheets that cannot even be tailored are certain to introduce both problems, and since most styling differences are easy to spot anyway, it is usually best not to use resets at all.

  5. Structure rules and declarations. Sort and group by selectors, use declarations just once (at least within “modules”), alphabetically sort declarations, and comment wisely. Be careful not to overdo it.

At the end of the day, web development is about probabilities, which is exactly the reason for the first three tips that all aim to minimize the likelihood of HTML changes. To be continued.

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (where applicable) or a message.

Comments (Closed)

  1. On November 11, 2008, 20:38 CET, Steven Black said:

    First!

    I didn’t know that media types could be specified within style sheets via @import statement arguments. COOL! Thumbs up for that one!

  2. On November 11, 2008, 21:39 CET, Kroc Camen said:

    Whilst all valid points, there’s not enough why given IMO.

    • Reference only one style sheet in the markup. By doing so, you can freely change the amount of sheets required, or the way the design is separated (e.g. put all colour definitions on a separate sheet). Ultimately, this tip is about flexibility, and maintaining clean separation with the HTML.

    • Specify media types within style sheets, not markup. The main benefit here is that it saves HTTP requests. Even if you specify a print media type in a LINK element, the browser still downloads the stylesheet! Speed wise, bandwidth is much cheaper than wasted HTTP requests, so use inline media queries in your CSS files.

    • Use appropriate ID and class names. The web is as mashable as ever. Remember that your HTML may appear verbatim on many different websites, all with differing HTML and CSS. The web is as mashable as ever - to that end, make your HTML as generic/semantic and reusable as possible.

    • Avoid “reset” style sheets unless you customize them. I’ve recently discovered the real reason why not to use reset CSS, and have removed the reset from my site. Suffice to say, you’re better off just refreshing in multiple browsers, and if one is off because padding is different for OL, then just style OL appropriately. Works just as well.

    • Structure rules and declarations. Varies greatly by personality, but I disagree greatly with sorting declarations alphabetically. I always order them by structural/layout significance. Display/Position/Float goes first, then Width/Height, then Margin/Padding, then Borders, then Font & Text, and then lastly Background.

  3. On November 11, 2008, 21:58 CET, Yoann said:

    I would really have appreciated some comments and explainations on why you think these are good practices, instead of just stated them as if they were obvious for everybody and non-arguable.

    Particularly : Why importing style sheets is better than linking them to the HTML. As far as I know, both methods have the same foot-print (fetching + processing) and give the same visual results. Why choose one over the other ? Same question for media types ; I’m curious to know what leads you to that way of doing things.

    As for sorting the declaration, I personnaly sort them in the same order as they appear in the HTML file : from top to bottom & from general to specialized. I found it to be easier to navigate through both file, as you only need one mental representation of the data structure you’re dealing with.

  4. On November 11, 2008, 22:47 CET, Freddy said:

    What is the advantage of importing style sheets over linking (concerning HTTP requests)?

    I understand your point about the media attribute though. Gets particulary nasty if you put another @import in your print.css to include some screen.css stuff, which seems not uncommon.
    screen.css -> +1
    print.css -> +1
    @import screen.css (or some other file already used for screen) inside print.css -> +1!

  5. On November 11, 2008, 22:47 CET, Duluoz said:

    Jens - Great stuff as always. I couldn’t agree more with your rational. Maintainability is always paramount!

    Kroc - great additional information, but must agree with Jens on Structure rules and declarations.

  6. On November 12, 2008, 9:25 CET, Jens Oliver Meiert said:

    Kroc, you’re hired đŸ˜‰ Great addition—reminds me to add a little bit more detail from—, so I’d just like to clarify two things:

    • When it comes to media types in style sheets, not markup, it’s more about helping maintainability, as a change of targeted media types would otherwise require a change of markup, which is costly—and avoidable.

    • Rules for CSS structuring can be a matter of taste, certainly, the most important thing being that they help collaboration and consistency. Alphabetical sorting of declarations is just something that I consider easiest to remember, and from my experience it does a really good job in keeping style sheets consistent across teams and organizations.

    Yoann, thankfully, Kroc jumped in, however the tip to import is really about maintenance, as changing HTML for CSS changes is unnecessary. I’ll write about that particular aspect in more detail soon.

    Freddy, same as above; saving HTTP requests rather refers to the recommendation to consolidate style sheets in one way when we’re talking about complex projects where you’re using several style sheets (dynamically combining them in one style sheet would work with link elements, too, though).

    Dave, you’ll get your contract this week đŸ˜‰

  7. On November 12, 2008, 10:41 CET, Andris said:

    Didn’t know that I can specify media types in the CSS-file. Thanx for that point.

  8. On November 12, 2008, 14:10 CET, Thomas Eilander said:

    Indeed! Very good tip about specifying the media type inside the css file. Didn’t know that either…

  9. On November 12, 2008, 17:18 CET, Joe McCann said:

    Reset.css is ALWAYS required for a project I work on. And if you have your build process building out the CSS efficiently and in a compressed manner, you don’t run into the issue of additional page weight or real redundancy. The pros outweigh the cons.

  10. On November 12, 2008, 17:19 CET, Joe McCann said:

    Oh and BTW, you do not minimize the requests by using includes in a master stylesheet; it still downloads the file.

  11. On November 12, 2008, 17:35 CET, Jens Oliver Meiert said:

    Joe,

    Oh and BTW, you do not minimize the requests by using includes in a master stylesheet

    no, that’s why I said “in order to avoid unnecessary HTTP requests, have that one style sheet generated out of other style sheets.” Other than that, the @import alternative means just as many requests, unless somebody decides to import all style sheets from a new file (not advisable).

    Hope that clarifies.

  12. On November 15, 2008, 2:22 CET, Louis Lazaris said:

    I totally disagree with #1 and #4.

    Firstly, separating your styles into more than one stylesheet can help to organize things better, and prevent 2000+ line stylesheets.

    And using a CSS reset is by far the best way to ensure cross-browser compatibility for your layout. You can always go through and delete any unnecessary reset rules, which should only take a couple of minutes per project.

    Not a good list, in my opinion, although there were a few good points.

  13. On November 15, 2008, 12:19 CET, Jens Oliver Meiert said:

    Louis, #1 says “reference only one style sheet in the markup,” not “don’t separate your style sheets.” And #4 gets explained in more detail later, which I hope helps, too.

  14. On November 15, 2008, 21:11 CET, Kristen Gunn said:

    I am not sure I understand your comment here “Reference only one style sheet in the markup”. I understand that I should keep media information out of the markup, and have separate style sheets for screen, for print, whatever. But does it make a difference whether you write these into your HTML as import @ statements or as link rel = stylesheet statements?

  15. On November 15, 2008, 21:14 CET, Kristen Gunn said:

    Sorry! Just went and read the specs and now understand the @ media rule. Great!

  16. On November 18, 2008, 10:46 CET, Stefano Bonzi said:

    But specifying media type in the @import rule doesn’t work in IE, does it?

  17. On November 18, 2008, 12:52 CET, Stefano Bonzi said:

    Let me explain myself a little better:
    This could be the content of the unique stylesheet referenced in my html page:

    @import url('css/screen.css') screen;
    @import url('css/print.css') print;
    @import url('css/screen_print.css') screen, print;

    Unfortunately this won’t work in IE (up to v. 7 as far as I know).

    There is an invalid alternative which, oddly enough, works in IE7 (invalid because @media rules cannot contain @import rules). It doesn’t work in Firefox though, and possibly not in other serious browser either (haven’t tested yet):

    @media screen {
     @import url('css/screen.css');}
    @media print {
     @import url('css/print.css');}
    @media screen, print {
     @import url('css/screen_print.css');}

    So, we could combine both techniques and everything should work, except that it would be invalid css. What else can we do?

    Put all rules in one big stylesheet (the unique one referenced in the html) dividing it into @media sections? But then we’d be missing the advantage of separating stylesheets, which is what we were trying to achieve in the first place.
    Ideas?

  18. On November 18, 2008, 14:56 CET, Kroc Camen said:

    @Stefano Bonzi
    If you use an @import inside an @media, it causes Safari to stop processing *all* CSS, related or not to the import—so that’s a no-go technique.

  19. On November 18, 2008, 18:19 CET, Jens Oliver Meiert said:

    Stefano, you could just make use of @media in respective style sheet itself. (See e.g. this site’s style sheet for an example.)

  20. On November 19, 2008, 16:06 CET, Stefano said:

    @Jens Meiert: That’s what I meant by “dividing it into @media sections”; but wouldn’t we be missing the advantage of keeping stylesheets separated (i.e. on different files) then?

    @Kroc Camen: I didn’t state it clearly, but I wasn’t suggesting to use that technique; invalid css is a no-go technique to begin with, of course.

    So what’s my point? Well, this: you simply can’t have it all.
    Meaning: if you want to follow Jens’ advice to:
    1. reference only one stylesheet in the markup AND
    2. specify media types within the stylesheet,
    supposing you do want IE users to see your styles, then you can only reference one big stylesheet divided into @media sections, and not different stylesheets for each medium.
    Now, since many web developers see it as an advantage to be able to keep different stylesheets separated, the logical conclusion is that those developers simply can’t follow both of Jens’ tips at the same time.
    I’m writing this because I loved this 5 tips, but found out, sadly, that I can’t use the first two of them because they mutually exclude each other.

  21. On November 20, 2008, 9:47 CET, Jens Oliver Meiert said:

    Stefano, that does work quite fine, even with multiple style sheets: Link one style sheet from the HTML, and that style sheet can then import others. If it’s about media types then, those can either be appended behind import (not aware of any problems with that) or the style sheets themselves use @media rules. That makes sense considering the use of many separated style sheets—e.g. your fonts.css (kind of stupid example, however) could specify screen and projection fonts, and then another one for print.

    Feel free to follow up directly if you like.

  22. On November 21, 2008, 21:45 CET, Jens Nedal said:

    I like the idea with you default.css, to mark the default for @media directly in the stylesheet itself and so ending up with single sheet. All the other points are valid and i don’t think they need any discussion.

    Anyone think that reset stylesheets “are bad” for all the points you have mentioned in your post about them.

    People think. KISS is the way. Don’t try to complicate and overload things. The way of keeping ways simple might need a little bit more involvement on your side in terms of learning the techniques of keeping things simply, making the time you spend building layouts shorter in effect!

    Relying on things that you can use to mesh up things quickly with the use of “tools” (if you can call those reset sheets such) clutters everything and achieves nothing.

    The few things you need to consider to get fonts displayed at equal height and the width of margins and paddings are easily noted and do not require a reset sheet.

  23. On November 25, 2008, 23:45 CET, Jens Nedal said:

    I don’t mean to be spamming here, but concerning tip number one, there is a limitation in IE concerning the number of stylesheets that can be loaded with or with the @import statement is 32. Anything above that will not be processed.

    I stumbled upon this today through my Google Alerts and was wondering why on earth i would need to reference over 32 stylesheets?

  24. On February 19, 2009, 16:36 CET, gareth hunt said:

    Linking to a single stylesheet is advisable for maintenance and performance reasons. In addition, there is no need to @import other stylesheets into the master stylesheet. There are documented drawbacks to doing this and you can always use server side scripting to combine and gzip any number of stylesheets (if you like to keep them separate for readability and maintenance reasons) into a single download.

  25. On February 19, 2009, 16:48 CET, Jens Oliver Meiert said:

    Jens, late, however with 32 style sheets to be imported you’ve got different problems than lack of IE support đŸ˜‰

    Gareth, nice way of putting it, too đŸ˜‰ I beg to differ when it comes to the need for @import though, it’s legitimate and might even be necessary under certain circumstances […].

  26. On March 4, 2009, 0:36 CET, freddy said:

    I am sorry but I don’t see how your reset-post answers my question about why importing is better than linking multiple stylesheets.

    Yes, I see your addition concerning the complex projects, but I still fail to see the reasons for point 1 (and 2). Does this only apply to people who only have access to the CSS files and thus can easily change the @import but not the template which generates the <link> in the <head>?

    Hope you can clarify.