— Open, multi-cloud stack for modern apps

If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box.

OK lemme dig in and totally ruin the joke.

• First off, it’s a joke, so don’t actually do this. I don’t even mind the occasional inline style for one-off stuff, but this is not that.
• To me the weirdest part is that period (.) character. Escaping the more unusual characters with a backslash () feels normal, but what is that period about? UPDATE: It’s because of the space. It’s two classes in the HTML, not one. Derp.
• The little period trick there doesn’t work when the following character is a number (e.g. .padding:.1rem;). UPDATE: Because classes that start with a number are invalid. Derp.
• You can avoid the escaping and trickery if you go with an attribute selector like [class*="display: flex;"].
• This reminds me of Mathias Bynens’ research: CSS character escape sequences. But… that doesn’t seem to work anymore? I wonder if browsers changed or if the tool broke and doesn’t output what it should anymore (e.g. does .color\3A \ #f06d06 look right?).

Here’s all that playing around:

Comments

1. Jan Boddez

   Permalink to comment# June 16, 2021

   The period is there because there’s two classes being applied, separated by a space: display: and flex;.

   It’s really no different than (in CSS) something like, e.g, .post.has-thumbnail { display: block; }.

   Reply
   • Chris Coyier

     Permalink to comment# June 16, 2021

     Yes! Ugh. Such a brain twister. Thank you.

2. Permalink to comment# June 16, 2021

   Regarding the period character, the class attribute is a space-separated list, so the element has two classnames: display: and flex;.

   This also explains the issue with numbers: 1rem starts with a number, so it is not a valid classname.

   Reply
3. Kyrodes

   Permalink to comment# June 16, 2021

   Well, people use classes like .align-left and .bg-red. It’s not much worse.

   Reply
4. Permalink to comment# June 16, 2021

   Well ain’t that Atomic.

   Reply
5. Mathias Bynens

   Permalink to comment# June 17, 2021

   Thanks for mentioning my old research + tool :) To answer your question, the tool is still accurate.

   The markup you’re using in the demo is:

   <div class="color: #bada55;">
   

   Here’s a direct link to the tool with the input from your demo: https://mothereff.in/css-escapes#0color%3A%20%23bada55%3B It shows a red warning saying “whitespace is not allowed!” because it’s built to escape a single identifier at a time. But the example uses two classnames instead of one!

   Similar to how <div class="foo bar"> applies two distinct classnames foo and bar, <div class="color: #bada55;"> applies two distinct classnames color: and #bada55;.

   You can use the tool to escape these separately. color: becomes color\3A (it could also be color\: since IE < 8 support is no longer a concern nowadays) and #bada55; becomes \#bada55\;.

   To patch the demo, there’s a few options:

   Use id="…" instead of class="…" (since only class can be space-separated). This would mean the HTML is invalid though since IDs cannot contain whitespace, but at least the styling would work.
   Select based on the two classnames: .color\3a.#bada55\;
   Remove the space so that only a single classname gets applied.

   Reply
   • Chris Coyier

     Permalink to comment# June 17, 2021

     LOl @ the VERY RED Whitespace is not allowed!

     THAT EXPLAINS IT.

     Same reason I brainfarted on the . in the other escaped selectors.

6. Archontt

   Permalink to comment# June 17, 2021

   I will take it as a sarcastic fun-making of all of the “revolutional” css libraries/frameworks that try to make it simpler/easier/better to use (like tachyons, all of the weird css-in-js libs, etc.).

   Reply
7. Kellen Green

   Permalink to comment# June 17, 2021

   Coming soon to a CSS framework near you!

   <div display="flex">
   
   [display="flex"] {
     display: flex;
   }
   

   Reply
8. Permalink to comment# June 17, 2021

   Have you heard of Tailwind CSS?

   Reply
9. Egir Ogurtsiv

   Permalink to comment# June 17, 2021

   I’m calling the police!

   Reply
10. Permalink to comment# June 17, 2021

    I love this so much, and I planning on using it for all my projects. However I am getting frustrated with having to write out the CSS by hand.

    Here is an awesome JS function that will great the style sheet dynamically for you. Just write your HTML as directed, and add this to the bottom of you page.

    <script>
        const styles = new Set();
    
        document.querySelectorAll('*').forEach((el) => {
            el.className
                .toString()
                .split(';')
                .map((style) => style.trim())
                .filter(style => !!style)
                .forEach(style => styles.add(`[class*="${style}"] { ${style} }`))
        });
    
        const style = document.createElement('style');
        style.innerHTML = [...styles].join("\n");
        document.getElementsByTagName('head')[0].appendChild(style);
    </script>
    

    Reply
11. Valtteri Laitinen

    Permalink to comment# June 17, 2021

    Classes that start with a number are perfectly valid per se. It’s just the class selector that can’t start with it. You have to escape the number by prefixing it with \3, so the selector should be .padding\:.\31rem\;.

    Reply
12. Marcel

    Permalink to comment# June 17, 2021

    Just look at TailwindCSS and save yourself the trouble of possibly finding yourself going down a black hole of experimentation :)

    Reply
13. Frankie Pagan

    Permalink to comment# June 17, 2021

    There are actually some benifits to this type of CSS. Atomic CSS or Utility CSS is growing in popularity… But with a learning curve. And you lose touch with css as you constantly using a utility class. CoCreateCSS Autogenerates the css dynamically, with no learning curve. just apply your class=”display:flex flex-wrap:wrap …” or any orher class and it will auto generate it. Only 11.2kb unlike tailwinds +1mb… its a work in progress so excuse any broken links to doc and demos.

    https://ws.cocreate.app/docs/utility
    https://github.com/CoCreate-app/CoCreateCSS

    Reply
14. paradox

    Permalink to comment# June 17, 2021

    I’m Amazed and terrified at the same time.

    Reply
15. Tino Zijdel

    Permalink to comment# June 18, 2021

    Yeah, the ultimate utility class system! Tailwind, eat that!

    Reply

The Debate Around "Do We Even Need CSS Anymore?"

This has become quite the hot topic lately. It's been talked about at a number of conferences and meetups I've been at personally lately. I've seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh? I thought we could have a little…

June 26, 2015

What do you do when your design pattern breaks down?

Say you have a module. Every site has modules, right? What do we do when the standard styles for module don't work in a particular situation and we need to alter them?

August 22, 2014

On the Growing Popularity of Atomic CSS

Even if you consider yourself a CSS expert, chances are that at some point on a large project you've had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance. Spaghetti Monster The cascade is incredibly powerful. Small…

November 24, 2017

The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.