The Two Problems With CSS

CSS

Not this CSS

I like cascading style sheets (CSS). Although the cross-browser differences drive me mad, I find writing clean CSS very satisfying. I like it so much that I wrote css_dryer, a Rails plugin, to let me write even cleaner CSS.

But there are two problems with CSS and they suck you into a world of pain. You don’t know when you’ve broken your visual design, and you don’t know when you’ve broken your visual design. Technically speaking that’s only one problem, but it’s such a big one it’s worth mentioning twice.

Let’s say I’m working on the appearance of a web page. I decide that every h2 element that’s the first child of its parent should have no top margin. So in my stylesheet I write:

h2:first-child { margin-top: 0; }

But what I don’t realise is that I’ve stuffed up the top of my sidebar whose h2 heading, for example, is now vertically wrong.

Consider code

I’m not sure this makes any sense, so consider code instead. Specifically, think about what happens when you modify a method. You want to make sure all the existing callers will work with the new behaviour. Two things give us that confidence:

Actually only tests give us confidence that everything still works. Grep helps us hunt through our code for everywhere the method is called, if we want to, and check things out by eye. You’d have to be pretty methodical doing this, and you’d probably miss dynamic invocations and so on, but something is better than nothing.

Anyway the point is that your tests tell you straightaway whether or not your change has broken anything. And if your tests are a little sparse, you can at least grep your way through the code in a valiant (albeit probably doomed) effort to check things out yourself.

Back to CSS

Compare this to CSS. If you modify a selector, or add a rule, you have:

  • No way to write tests that verify the visual appearance of your pages
  • No way to search through your pages for what your change would affect (grep takes regular expressions, not CSS selectors)

I constantly tweak top and bottom margins for heading elements, first-child paragraphs, etc. And every time I do, I mess up the appearance of the same element on some other page. I have a 100% record.

What to do?

I would dearly love to be able to write tests that autotest can run, verifying that elements which are supposed to be aligned with each other still are. You can probably tell that margins and paddings are my achilles heel; colours I’m fine with (black, white, grey — how hard can it be?).

I would also very much like to grep my HAML templates, or rendered pages, by CSS selector pattern. Then I could at least do a manual check to see just how much crapola I have sprayed across my site with each change to a CSS style rule.

But I’m not sure how to do these. Anyone got any ideas?

Andy Stewart, 12 November 2008

Posted in CSS

7 Comments

Jump to comment form

  1. You don't need to worry about this if you make sure your CSS is specific.

    So, in your case, your two H2s would be styled specifically:

    subnav h2:first-child { ... }

    main-content h2:first-child { ... }

    If you combine this approach with CSS reset styles you'll probably find all these issues go away.

    Most of them, anyway!

    Olly
    13 November 2008

  2. Well, yes, if the CSS is specific then a selector will apply to fewer places. However I've always tended to write CSS that's too specific, resulting in verbose style sheets which are hard to manage.

    So these days I'm trying to write selector patterns that are as general as possible, for maximum reuse and minimum complexity. But the wider the selector patterns apply, the harder it is to keep track of where they apply.

    One solution would be just to get better at CSS, or pay somebody else who's better at CSS. It's not really solving the problem though in an automated way though....

    Andy Stewart
    13 November 2008

  3. Well, if I were you I would pay somebody else.

    marcel
    05 December 2008

  4. I don't agree with you marcel. There's a lot o books and courses and css is not so complicated.

    max
    05 December 2008

  5. I agree with max. CSS is simple and most of people can learn it.

    kevin
    10 December 2008

  6. You're missing my point.

    I agree CSS is simple. The problem is there's no way to write tests to verify you are achieving the results you want.

    Most programming languages are simple...but that doesn't mean you don't need to write tests for your code.

    Andy Stewart
    11 December 2008

  7. Anybody reading down to here might be interested in css-test, a Python project that aims to test CSS automatically.

    Andy Stewart
    19 December 2008

Have your say

You can use Markdown in your comments. If you want to post code, do this:

<pre><code class="ruby|javascript|css|html">your code here</code></pre>

Thanks!