Programming CSS

There’s a worrying tendency for “real” programmers look down their noses at CSS. It’s just a declarative language, they point out, not a fully-featured programming language. Heck, it isn’t even a scripting language.

That may be true, but that doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages.

Take CSS selectors, for example. At the most basic level, they work like conditional statments. Here’s a standard if statement:

if (condition) {
// code here
}

The condition needs to evaluate to true in order for the code in the curly braces to be executed. Sound familiar?

condition {
// styles here
}

That’s a very simple mapping, but what if the conditional statement is more complicated?

if (condition1 && condition2) {
// code here
}

Well, that’s what the decendant selector does:

condition1 condition2 {
// styles here
}

In fact, we can get even more specific than that by using the child combinator, the sibling combinator, and the adjacent sibling combinator:

  • condition1 > condition2
  • condition1 ~ condition2
  • condition2 + condition2

AND is just one part of Boolean logic. There’s also OR:

if (condition1 || condition2) {
// code here
}

In CSS, we use commas:

condition1, condition2 {
// styles here
}

We’ve even got the :not() pseudo-class to complete the set of Boolean possibilities. Once you add quantity queries into the mix, made possible by :nth-child and its ilk, CSS starts to look Turing complete. I’ve seen people build state machines using the adjacent sibling combinator and the :checked pseudo-class.

Anyway, my point here is that CSS selectors are really powerful. And yet, quite often we deliberately choose not to use that power. The entire raison d’être for OOCSS, BEM, and Smacss is to deliberately limit the power of selectors, restricting them to class selectors only.

On the face of it, this might seem like an odd choice. After all, we wouldn’t deliberately limit ourselves to a subset of a programming language, would we?

We would and we do. That’s what templating languages are for. Whether it’s PHP’s Smarty or Twig, or JavaScript’s Mustache, Nunjucks, or Handlebars, they all work by providing a deliberately small subset of features. Some pride themselves on being logic-less. If you find yourself trying to do something that the templating language doesn’t provide, that’s a good sign that you shouldn’t be trying to do it in the template at all; it should be in the controller.

So templating languages exist to enforce simplicity and ensure that the complexity happens somewhere else. It’s a similar story with BEM et al. If you find you can’t select something in the CSS, that’s a sign that you probably need to add another class name to the HTML. The complexity is confined to the markup in order to keep the CSS more straightforward, modular, and maintainable.

But let’s not forget that that’s a choice. It’s not that CSS in inherently incapable of executing complex conditions. Quite the opposite. It’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.

Have you published a response to this? :

Responses

Samuel Snopko

@adactio explaining CSS PROGRAMMING to all the devs, who thinks that CSS is not powerful or even not programming language at all… “…doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages.”adactio.com/journal/14574

Eli Mellen

But let’s not forget that that’s a choice. It’s not that CSS in inherently incapable of executing complex conditions. Quite the opposite. It’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.

# Posted by Eli Mellen on Tuesday, December 4th, 2018 at 9:48pm

Dylan Smith

“It’s not that CSS in inherently incapable of executing complex conditions. Quite the opposite. It’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.”adactio.com/journal/14574

# Posted by Dylan Smith on Wednesday, December 5th, 2018 at 11:12am

Tom Tinkerson

„… that doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages. (…) t’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.”adactio.com/journal/14574

Val Head

“It’s not that CSS in inherently incapable of executing complex conditions… It’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.” - @adactio adactio.com/journal/14574

# Posted by Val Head on Wednesday, December 5th, 2018 at 8:22pm

Craig Buckler

Programming #CSS by @adactio:adactio.com/journal/14574 “CSS selectors are really powerful. And yet, quite often we deliberately choose not to use that power.” Too right. If you don’t like CSS, that’s fine. But at least make an effort to learn it before casting judgement.

Tommy Hodgins

@adactio great blog post adactio.com/journal/14574 though I can’t help but feel that limiting CSS selectors to classes to make it easier is like limiting a guitar to one string to make it easier to play. It is easier, but harder to make meaningful music with. Will chew on this more

HJ Chen

“It’s not that CSS in inherently incapable of executing complex conditions. Quite the opposite. It’s precisely because CSS selectors (and the cascade) are so powerful that we choose to put guard rails in place.”—@adactio#cssadactio.com/journal/14574

# Posted by HJ Chen on Friday, December 7th, 2018 at 4:38pm

The whale

Programming CSS - There’s a worrying tendency for “real” programmers look down their noses at CSS. It’s just a declarative language, they point out, not a fully-featured programming language. Heck, it isn’t… adactio.com/journal/14574 #Learn #CSS by @adactio

# Posted by The whale on Friday, December 28th, 2018 at 5:17pm

alis.me

Turing complete(ish).

# Thursday, May 16th, 2019 at 11:42pm

6 Shares

# Shared by Martin Auswöger on Monday, December 3rd, 2018 at 10:48pm

# Shared by Окнечирик on Tuesday, December 4th, 2018 at 4:17am

# Shared by ᴩʜɪʟʟɪᴩ ʟᴏᴠᴇʟᴀᴄᴇ on Thursday, December 6th, 2018 at 5:56pm

# Shared by flyingfisch on Friday, December 7th, 2018 at 4:25pm

# Shared by Jan Gabler 🌵 on Friday, December 7th, 2018 at 5:12pm

# Shared by F. Paul on Saturday, December 8th, 2018 at 11:14am

15 Likes

# Liked by Michelle Barker on Tuesday, December 4th, 2018 at 12:30am

# Liked by Nick Sayre on Tuesday, December 4th, 2018 at 12:31am

# Liked by 𝙰𝚊𝚛𝚘𝚗 𝙱𝚘𝚠𝚍𝚎𝚗 on Tuesday, December 4th, 2018 at 12:31am

# Liked by ppk 🇪🇺 on Tuesday, December 4th, 2018 at 12:31am

# Liked by Ivan Wilson on Tuesday, December 4th, 2018 at 12:31am

# Liked by Drew McLellan on Tuesday, December 4th, 2018 at 12:31am

# Liked by Aaron Parecki on Tuesday, December 4th, 2018 at 2:06am

# Liked by Окнечирик on Tuesday, December 4th, 2018 at 4:45am

# Liked by Aleksi Peebles on Tuesday, December 4th, 2018 at 8:51am

# Liked by ᴩʜɪʟʟɪᴩ ʟᴏᴠᴇʟᴀᴄᴇ on Thursday, December 6th, 2018 at 6:01pm

# Liked by F. Paul on Saturday, December 8th, 2018 at 11:44am

# Liked by Kristof Neirynck on Monday, December 17th, 2018 at 6:31pm

# Liked by getify on Wednesday, March 13th, 2019 at 5:52pm

# Liked by Ademola ⚡ on Wednesday, March 13th, 2019 at 5:52pm

# Liked by Mark Howells-Mead on Wednesday, March 13th, 2019 at 5:52pm

1 Bookmark

# Bookmarked by Chris Aldrich on Thursday, December 6th, 2018 at 10:19am

Related posts

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Supporting logical properties

Using the CSS trinity of feature queries, logical properties, and unset.

Let’s get logical

Let me hear your blocky talk.

Faulty logic

CSS logical properties here, they just aren’t evenly distributed yet.

aria-live

An exception to my general rule that ARIA attributes should be added with JavaScript.

Related links

CSS :has() Interactive Guide

This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!

Tagged with

What is Utility-First CSS?: HeydonWorks

Heydon does a very good job of explaining why throwing away the power of selectors makes no sense.

Utility-first detractors complain a lot about how verbose this is and, consequently, how ugly. And it is indeed. But you’d forgive it that if it actually solved a problem, which it doesn’t. It is unequivocally an inferior way of making things which are alike look alike, as you should. It is and can only be useful for reproducing inconsistent design, wherein all those repeated values would instead differ.

He’s also right on the nose in explaining why something as awful at Tailwind could get so popular:

But CSS isn’t new, it’s only good. And in this backwards, bullshit-optimized economy of garbage and nonsense, good isn’t bad enough.

Tagged with

CSS Nesting and the Cascade | WebKit

As well as a very welcome announcement, Jen has a really good question for you about nesting in CSS.

If you have an opinion on the answer, please chime in.

Tagged with

Modern CSS in Real Life - Chris Coyier

This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.

Tagged with

Tagged with

Previously on this day

9 years ago I wrote Commons People

The tragicomedy of the creative commons.

13 years ago I wrote A brief list of false dichotomies

Liquid vs. fixed has been omitted. We regret the error.

17 years ago I wrote Northwest passage

Think you can’t afford to come to Web Directions North? Think again.

22 years ago I wrote One of us

Andrew Sullivan has seen the light and I’m not talking about politics.

22 years ago I wrote "It" is here

Here’s what all that fuss was about. "It" has been revealed. "It" is a scooter.