100 words 051

I’ve been thinking about what Harry said recently about logic in CSS. I think he makes an astute observation.

You can think of each part of a selector as a condition:

condition { }

That translates to code like:

if (condition) { }

So if you have a CSS selector like this:

condition1 condition2 condition3 { }

…it translates to code like this:

if (condition1) {
    if (condition2) {
        if (condition3) {

That doesn’t feel very elegant, even in its simpler form:

if (condition1 && condition2 && condition3) { }

I like Harry’s rule of thumb:

Think of your selectors as mini programs: Every time you nest or qualify, you are adding an if statement; read these ifs out loud to yourself to try and keep your selectors sane.

Have you published a response to this? :


1 Like

# Liked by Scott Jehl on Tuesday, May 12th, 2015 at 11:10pm

Previously on this day

6 years ago I wrote Seams

There is a crack, a crack in everything. That’s how the light gets in.

15 years ago I wrote End of the endeavour

My cruise around Alaska’s Inside Passage has come to an end. The Spirit Of Endeavour docked in Juneau and we disembarked this morning.

17 years ago I wrote And again.

I give up.

18 years ago I wrote Web services, Weblogs and Wired

Here’s an excellent article in The Guardian by all-round good guy, Ben Hammersley all about web services.