Hacker News Reader

Comment by ratww | Hacker News Reader

> class="flex flex-wrap" doesn't seem any better than just having the equivalent inline styles on it

It is better than inline styles, though. Inline styles can't use media queries or pseudo-selectors, are difficult to override due to having a too-high specificity, and you have to copy values around (CSS variables also solve that though), among other issues.

View on HN

Could almost just instead add a class to your html, and at the same place as the markup add a style tag inline writing exactly what you need. Css doesn't have to be one huge chunk. So instead of

   <div class="lots of stuff">... or <div style="lots of stuff">...

one can do

  <style>
  .something { lotsofstuff }
  .something:evenwithpseudo { otherstuff }
  @andevenwithmedia {}
  </style>
  <div class="something">

and just have lots of small <styles> everywhere.

That's basically how elm-css[0] does it. One writes css in the attributes of elements, and then when it's converted to DOM-stuff the css is extracted and classes created (or reused if similar). Since it's all elm-code one can reuse variables, call functions, import styles from somewhere etc

[0]: https://package.elm-lang.org/packages/rtfeldman/elm-css/late...

If you do it that way you have to give a name to everything. Imagine writing javascript but every expression has to have a name, its all globally scoped, and one expression cannot refer to another one by name. There's a lot of utility in not having to name everything

Sure, that solves the problem, but is still very verbose and doesn't really help with consistency by itself.

At this point one has to ask themselves if they're "avoiding inline styles" (or anything that looks like it) for a true technical reason, or just because of cargo-culting.

You can do pseudo inline styles by just putting a <style> tag after the element which will let you use those. I think the argument is that tailwind isn't _conceptually_ different than inline styles even if there are a few minor technical differences.

Your solution is also not conceptually different from having inline styles. In fact it's even closer to inline styles than Tailwind, since Tailwind is able to enforce consistency.

I love how these "developers" who apparently never had to develop a complex layout just hate on stuff they don't comprehend. I mostly use Bootstrap, specially the utilities like the grid and I use a lot of these classes. It simple makes your job easier and plot twist, if you endup migrating you CSS framework without any need I got bad news for this fellow.

Yep. Bootstrap is a great example of how developers of different walks of life and different levels of experience are able to grasp helper classes easily.

Reply on news.ycombinator.com