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:
The period is there because there’s two classes being applied, separated by a space:
display:
andflex;
.It’s really no different than (in CSS) something like, e.g,
.post.has-thumbnail { display: block; }
.Yes! Ugh. Such a brain twister. Thank you.
Regarding the period character, the
class
attribute is a space-separated list, so the element has two classnames:display:
andflex;
.This also explains the issue with numbers:
1rem
starts with a number, so it is not a valid classname.Well, people use classes like .align-left and .bg-red. It’s not much worse.
Well ain’t that Atomic.
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:
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 classnamesfoo
andbar
,<div class="color: #bada55;">
applies two distinct classnamescolor:
and#bada55;
.You can use the tool to escape these separately.
color:
becomescolor\3A
(it could also becolor\:
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 ofclass="…"
(since onlyclass
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.
LOl @ the VERY RED
Whitespace is not allowed!
THAT EXPLAINS IT.
Same reason I brainfarted on the
.
in the other escaped selectors.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.).
this is basically tailwindCSS tbh
Coming soon to a CSS framework near you!
See, this actually makes sense! What they did in the article seems entirely pointless because there’s just as much work put into and just as much clutter in the HTML document as there would be if they used the style attribute (plus the additional work in the CSS document, which is also hard to read if you don’t really understand CSS). I was thinking “if you don’t want to type that whole thing, just assign a class with a normal name! And if you want to type the whole thing, what’s the harm of using style?” But if what’s in your comment is actually going to be available, that’s honestly ideal. If there’s only one property to set so a class isn’t worth it, but you don’t like the style attribute (I’m not a fan myself), being able to set that one property directly would be amazing!
Have you heard of Tailwind CSS?
Exactly, this is basically how people write cool css nowadays
I’m calling the police!
Go gor it
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.
Nowadays I have started using escaping.
.width-100\% { width: 100%; }
.width-50\% { width: 50%; }
Full Width Div
Half Width Div
I will now also consider using Kellen Green’s trick.
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\;
.Just look at TailwindCSS and save yourself the trouble of possibly finding yourself going down a black hole of experimentation :)
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
If you use tailwind properly, the 1mb quickly shrinks. Tailwinds build step prunes unused classes (and as you can imagine, there is a lot…)
I’m Amazed and terrified at the same time.
Yeah, the ultimate utility class system! Tailwind, eat that!
CSS and HTML is about semantic.
Explain what you have “achieved” mentioning color and size in className when after a day or 2 you may need to change it to a different color and size…
Nah. Wrong approach. HTML markup should not take care of the styling.
Aren’t they already doing something like this with TailWindCSS? Tailwind just has better classnames LOL.