17 ms·
Styling with Classy CSS (2006)
- i0nutzb 3y agoBack in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...
- threatofrain 3y agoCSS is one of the places in web dev that never really reached consensus, even today. We might get WASM as the app platform of the web before this even happens.
- eternityforest 3y agoWASM is more of the same exact issue... web devs inventing fragmentation and trying to make things low level again even though they have such a great platform that's already batteries included...
- BasilPH 3y agoWhy do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice examples. MDN is great, but with Tailwind I get reasonable presets. - TailwindUI: Saves me a lot of time and looks good without feeling as generic as bootstrap.
- haydenchambers 3y ago[dead]
- hipadev23 3y agoMy gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a <table> with a whole host of <td> elements, those repeated class definitions become quite tedious.
- colejohnson66 3y agoUse PostCSS: .myFancyTable td { @apply p-4; } The advantage of Tailwind, IMO, is that styles for one-off components (like a breadcrumb bar) can just be written inline instead of in a separate file. But reused components like table cells should be using CSS selectors.
- hipadev23 3y agoCool. So @apply is basically a way to compose classes from other classes?
- deleted 3y ago[deleted]
- cantSpellSober 3y agoThis was already an option with Sass's @extend (later ported to a PostCSS plugin)
- SahAssar 3y agoAnd then you are just writing css with a more obtuse syntax.
- satvikpendem 3y agoCongratulations, you have reinvented the purpose of CSS classes. This is why I don't use Tailwind, at a big enough scale, it becomes lots of duplication, and if you use @apply, it's just...CSS classes as originally designed.
- 3y ago
- naet 3y agoTailwind is one of those polarizing topics where people either love it or hate it. I've used it at a few companies and I didn't care much for it, but I had coworkers who swore by it.
- agloe_dreams 3y agoWe've been using it for a little over a year. So far my biggest finding is that Tailwind works best when you have a UX team that is forced to play by the same rules. In that context, with a heavily chopped down tailwind.config, it comes alive as a utility. It can even act to proof mistakes in the UX work. A div with a 1rem padding, with a BG of neutral lightest and a text color of "primary" is a spec defined by class names and a mock. I honestly think that in uncontrolled environments without a singular design system and without configuration, tailwind can become a mess. I really do not care for the out of the OOB config, it is way too free on color schemes. You need a few people to play the rulemakers and constraint for it to be helpful.
- gedy 3y ago> Tailwind works best when you have a UX team that is forced to play by the same rules I agree but found that Bootstrap (>v4) to be better at this. Instead of every possible color and tweakie, Bootstrap has pretty decent utility classes that are semantic, and in addition to all the basic components like button, etc: https://getbootstrap.com/docs/5.3/utilities/background/ https://getbootstrap.com/docs/5.3/utilities/background/
- nicbou 3y agoPerhaps I'm just old-fashioned but I prefer semantic classes. I completely rewrote the CSS for my website and I did not need to touch the templates. An .error is an error and a . collapsible is a collapsible. Their exact style is not dictated by the markup. I also like that it keeps the markup small and easy to read, because it's not peppered with CSS. It also avoids situations where two widgets look different because I forgot to copy one class over. A .collapsible is a collapsible.
- caseyohara 3y agoSemantic classes make sense for small and brochure-style websites. For any moderately complex website or web application, your class semantics quickly become a challenge. Naming things is exceptionally hard, especially when each "component" can have multiple variants each with their own modifier classes e.g. `alert alert-danger alert-with-icon alert-collapsible alert-expandable alert-hidable`. Multiply this by hundreds of components and you find yourself in class soup that's almost indistinguishable from Bootstrap and Tailwind. So I've given up on semantic naming because it's futile for ambitious projects. Restyling a website without changing any of the markup is a pipe dream from the CSS Zen Garden days when websites were much simpler and more static. Apart from small/personal/static websites, it just never happens in practice today.
- kaishiro 3y agoAs someone who has consulted on more enterprise level websites than I can count, this has not been my experience at all.
- caseyohara 3y agoCan you point me to an enterprise level website that uses semantic classes?
- kaishiro 3y agoI cannot, for professional reasons, point you to any that I have personally worked on. However, Smashing Magazine (https://www.smashingmagazine.com https://www.smashingmagazine.com) comes to mind as one of the early adopters of both highly semantic BEM and an SSG methodology.
- satvikpendem 3y agoAt a certain scale, Tailwind becomes a write-only DSL. It's almost inscrutable if you want to change something on some heavily classed HTML tag.
- deleted 3y ago[deleted]
- peebeebee 3y agoWhile I don't really like it myself, Tailwind is a good CSS framework for the age of component-based application design, where your JS / CSS / HTML lives in a single file, and your application-design won't change that heavily. But when you want to redesign a whole site after the fact, or if you want to keep your component library logic & templates, and port it to a new system, Tailwind might be more trouble than it's worth. It's just that... Atomic CSS has its benefits, BEM has its benefits, etc etc etc.
- matheusmoreira 3y agoYeah. It's essentially a less verbose form of per-element style="..." attributes. It's weird to me that this is considered the state of the art today.
- deleted 3y ago[deleted]
- Brajeshwar 3y agoThis is what I did before stumbling on BEM - https://en.bem.info/methodology/css/ https://en.bem.info/methodology/css/
- munk-a 3y agoNow that you're familiar with BEM you can use the perfect css approach `.page__inner__title-f-green {color:#0f0;}` imagine the portability!
- cantSpellSober 3y agoYep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap. Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.
- city41 3y agoWhat was the first "official" atomic css framework? I believe it was atomic.css[0]? In this style of css, tailwind is very much a latecomer. [0]https://acss.io/ https://acss.io/
- jamesmccann 3y agoI think Tachyons struck the balance to be honest. Tailwind's "functions" and combinations seem to allow a higher level of complexity where it becomes difficult to quickly inspect a class block after some time has passed.
- tuyiown 3y agoSo visionary to be considered a wtf. Thanks for the submission, made my day !
- city41 3y agoMe too. This is really quite amazing in a small way. It really made me laugh.
- deleted 3y ago[deleted]
- draw_down 3y ago[dead]
- munk-a 3y agoIt's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability. Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!
- agloe_dreams 3y agoThis was the only bit in tailwind we modified a lot in our Config. You really need to remove the default colors and define them as [Primary, Secondary, Neutral, Warning, Error, Success] and then add variants of each. Then it really works. I honestly think this should be a default config change/setup option in TW. Nobody with a Design System/Brand guidelines should be including the default colors in their app.
- MrJohz 3y agoI agree that you don't need the default colours, and in fairness this is one of the things that Tailwind fairly explicitly encourages. That said, I also used to use "primary"/"secondary"/etc names for the colours, but since using Tailwind, I've been using colour names directly (e.g. "blue" or for fancier design systems "mirage-blue" or whatever their name for their specific custom blue is). I find it's helped for a few reasons, but the big one is just that it's easier to keep the colours in my head - I'm not thinking in terms of "tertiary-alt-3" or something, I'm looking at a design and going "that's green, which green? This green". I have more discussions talking about colours in terms of the standard English colour names than I do in terms of those colours' purposes in the design system, so the colour names seem more practical. That said, I agree that spending some time switching the colours to whatever design system you're using us very useful. Another trick I've found is starting off a project just using raw CSS values (the `p-[8px]` syntax), and then when the basic designs are done based on whatever the designer has sent, getting a list of all the custom classes you've got and using this to define what the standard units are. This is helpful when the design guide isn't specific on these details, and the designer is being more freeform.
- nwienert 3y ago
- Julesman 3y agoI will always argue against this. Keep your layout in one file and your styling in another. I've done more CSS than most in heavy web production and I never once had a reason to think something like this would be faster or more efficient.
- city41 3y agoI've been a web developer for about 15 years now and I absolutely love Tailwind. I find it so much faster and efficient that it is really aptly named.
- jermaustin1 3y agoCSS Utility classes are "faster" and that is the draw, but once they have been overused and abused, then you are either stuck with them, or you spend a lot of time cleaning the tech debt and rewriting the css properly. At my current job, I work on a legacy application which is still actively developed and released. I spend a lot of my time cleaning up inline styles, styles that are applied via javascript calls, and style blocks on individual pages. I wish the inline styles would have been utility classes, because at least then they would be easy to find and replace, instead, there are "margin-top: 3px" and "margin: 4px 0 0" and "padding-top: 2px" and dozens of variations on that that had they just done something like ".mt-small { margin-top: 3px }" there wouldn't be so many variations and inconsistent looking pages. This company would have benefited greatly from Bootstrap or Tailwinds. I hate both of those, but there is no denying how easy they are to use and abuse.
- stevebmark 3y agoSay more. What's the distinction between layout and style?
- micromacrofoot 3y agoI feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties. Instead of .f-green in your HTML you can do --f-green in your CSS. <header class="f-green"></header> would become header { color: var(--f-green); } or if you really hate CSS and must stay in HTML <header style="var(--f-green)"></header> Though the literal naming is a touch too specific anyway. Something like this is wonderful: --f1-color: green; header { color: var(--f1-color); } then you don't have to do confusing things like header .f-green { color: red; } because you can do header { --f1-color: red; } So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do: footer { --f1-color: green; } We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.