CSS writing methodology using : in class name ( Tailwind CSS )

Question

I know there are a multitude of CSS frameworks (Bootstrap, Materialize, Skeleton, Bulma, Foundation), as well as a multitude of methodologies for writing CSS (BEM, DRY, ITCSS, OOCSS)

But I was doing a background check on the raw CSS of Tailwind ( https://tailwindcss.com/ ) and saw some classes written as below

.focus\:placeholder-gray-500:focus:-ms-input-placeholder{
  color:#a0aec0!important
}

.xl\:w-9\/12 {
  width: 75%
}

.xl\:hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)
}

I assume I got a little confused, why would someone write CSS that way? That’s a new methodology?

I didn’t find a very practical way of writing CSS, but there would be some technical reason behind it that justifies writing CSS like this?

And it’s safe to write .classe\:modificador { } or some CSS interpreter may not recognize this \: or \/ in the middle of a CSS class name?

Here is a practical example

.div\:border\/900 {
  border: 10px solid #000;
}
.focus\:bg-red:focus {
  background:red;
}

<div class="div:border/900">
  <input type="text" class="focus:bg-red">
</div>

Answer 1

The exhaust is used for years, but in most cases it is unnecessary, if you can write something simpler separated by hyphen (-) or by underscore (_) why appeal to something like this?

So almost everyone who does a decent job does something simple, clean and efficient, but then come these new frameworks/kits/libs/methods wanting to reinvent the wheel, just like when they came up with this BEM (Block Element Modifier), which is a solution to solve problems that people themselves created and ultimately their projects walk with the problems and patching (OK) hand in hand instead of doing in a well thought out way.

The escape was for the need to use a character that was limited to X situation, imagine you have a specific HTML, of which the Ids were dynamically populated and you have no control over it, something like:

<div id="#900"></div>

You can’t do this:

##900 {

}

Of course I could use it [id="#900"], but just to illustrate it yourself, you could also escape like this:

#\#900 {
    background: #fc0;
}

<div id="#900">teste</div>

Note that situations also occur where you want to do the "match" with a use class :, you could simulate like this:

[class="foo:bar"], /*exato*/
[class^="foo:bar "], /*começa*/
[class*=" foo:bar "], /*contêm no meio de duas outras classe*/
[class*=" foo:bar$"] /*termina*/
{
    background: #fc0;
}

<div class="foo:bar">exato</div>
<div class="foo:bar ">começa</div>
<div class="foo:bar abc">começa</div>
<div class="abc foo:bar def">contêm no meio de duas outras classe</div>
<div class=" foo:bar">termina</div>
<div class="abc foo:bar">termina</div>

See the unnecessary complexity, out of 4 selectors in a single rule, to try to get to the effect of what .class makes, now using the simplified exhaust:

.foo\:bar {
    background: #fc0;
}

<div class="foo:bar">exato</div>
<div class="foo:bar ">começa</div>
<div class="foo:bar abc">começa</div>
<div class="abc foo:bar def">contêm no meio de duas outras classe</div>
<div class=" foo:bar">termina</div>
<div class="abc foo:bar">termina</div>

It is worth noting, what you already know, that : is used in pseudo-elements and pseudo-class, so I will summarize and make it very clear what I understand of all this:

The \: is not a methodology

If someone takes "X" and decides to start using for a specific case they may even invent such a methodology, but that doesn’t even mean it’s good, just means that people liked it and for them it was practical and that there will be people who will adopt the new technique just because everyone else is using and because it seems cool to them, they are not adopting because it is better.

---

Responding:

I assume I got a little confused, why would someone write CSS that way? That’s a new methodology?

It’s a new methodology, the reason, why he "wants", as I described in the rest of the answer, nothing improves, it’s just a way they want to do and there are people who want to follow without real motivation or real utility.

I didn’t find a very practical way of writing CSS, but there would be some technical reason behind it that justifies writing CSS like this?

This is a matter of opinion, but in practice even in practice, everyone is exaggerating with CSS, most things could be simple and CSS already nay is very well done, has problems, if invent too much already spoils, and is what these "frameworks" are doing, wanting to reinvent the wheel and say theirs is better, I work with HTML+CSS since CSS2.1 (Internet Explorer 6) and I always managed to create simple CSS but that the site looked great, with reasonable effects and easy to understand, there are no real justifications to invent methods so, only if it is a matter of "marketing", attract the fools who understand little and who want the easy.

And it’s safe to write . class:modifier { } or some CSS interpreter may not recognize this : or / in the middle of a class name in CSS?

It is safe, as long as you know what you are doing, only old CSS interpreters could suffer from problems, modern browsers support years of escape, as I said at the beginning of the answer. But remember that in addition to escaping the characters you can also use something like .foo\3Abar (hexadecimal, 3A is the same as 00003A) which equals to .foo\:bar, the only reason to use this is that browsers older than IE8, such as IE6 and 7 did not recognize the \:, among other problems that maybe I list later (if anyone is interested in what happens in Internet Explorer).

but would have some technical reason behind it to justify writing CSS like this?

No, unless you’re developing for a "framework" or project that already uses such a structure, and if you use another form other than the one chosen by the "project" then there would be a problem, so if you follow what they established as a "rule" is what makes it easier in the environment, precisely because "they have established", does not mean that it will be better outside of projects that already use it.

Most of the time it’s just an exaggeration when they establish that they’re going to use something.