6 ms·
It's 2018, does CSS supported by modern browsers still lack the basic building blocks of reuse? Why am I being asked to choose between class="resources" (and h
by peeters 8y ago
It's 2018, does CSS supported by modern browsers still lack the basic building blocks of reuse? Why am I being asked to choose between class="resources" (and having to know how to center a div in that resources class) and class="t:center t:wide-margins t:light-bg" (which is basically reintroducing all the harm of style tags). Why can't I, in 2018 and with vanilla CSS, say:
.resources {
@include .centered
@include .wide-margins
@include .light-bg
}
It seems like every one of these styling tools is just polishing a turd that is a turd for no reason. I can't imagine why the above would be difficult, it wouldn't have to change anything about the actual application of CSS rules, it could literally just be a simple preprocessor.
Sure give me a library of common ways of doing something. That's great. But the lack of basic code reuse for CSS is staggering. Even if you're doing reuse with SASS you're stuck with the fact that you end up generating a CSS File that's 4-5 times larger than it needs to be.
- ealhad 8y agoIn 2018 with postcss, you can have the following: .resources { @apply centered wide-margins light-bg; } And that's exactly what Tailwind is about, btw! Sadly, as you point, it's not vanilla. It works, though.
- tlrobinson 8y agoIf i'm looking at the right thing (https://github.com/pascalduez/postcss-apply https://github.com/pascalduez/postcss-apply), it looks like you can only @apply property sets in name variables, like so :root { --toolbar-theme: { background-color: rebeccapurple; color: white; border: 1px solid green; }; } .Toolbar { @apply --toolbar-theme; } Rather than arbitrary CSS classes?
- ealhad 8y agoI forgot something! Actually, this isn't the @apply I was thinking of. Tailwind comes with its own @apply: https://tailwindcss.com/docs/functions-and-directives/#apply https://tailwindcss.com/docs/functions-and-directives/#apply
- tlrobinson 8y agoI’ve tried just about every “modern” method of styling components over the last few years and this is what I still wish for.
- mikewhy 8y agoSass and Less has had this functionality for years.
- bennofs 8y agoThe main selling point of tailwind for me is that it improves iteration time by grouping the CSS with the HTML: I don't need to switch files anymore and also more importantly don't need to come up with ids and selectors. It reduces the level of indirection. Of course you can say now I mixed style with HTML but if you never intend to change style separately from HTML then why introduce the mental overhead of indirection?
- err4nt 8y agoWhat's wrong with class="centered wide-margins light-bg"? It would do the same as what your .resources class looks like it might do, and it's supported everywhere already.
- deleted 8y ago[deleted]
- peeters 8y agoNothing when everything's a one-off and you only have one supported theme. But if CSS is your component model (e.g. a card is always just a div but with a special style) then you'll have "centered wide-margins light-bg dropshadow" on every one of those divs, rather than just class="card". Similarly if you want to have two different themes with the same DOM, you can't do so easily.
- jaydid 8y agoNobody who uses Tailwind would suggest copying the same classes over and over again in the example you’re talking about. You would either still create a card component (Tailwind does have the concept of components), or if you were using a framework like Laravel you could create a card blade component that held the tailwind card classes in one place.
- peeters 8y agoI wasn't talking about Tailwind, I was talking about vanilla HTML and CSS. I assumed the question asked of me ("what's wrong with"...) was asked in that context.