10 ms·

CSS in 2025: Let's write html inlined styles as if it was 2005 and separation of formatting/representation was never invented. I talk of tailwind, of course.

• h4x0rr 8mo ago
  Yeah let's do that. You have everything related to your component on place instead of jumping between files.
  • lawn 8mo ago
    Is jumping between files supposed to be difficult or something?
    • runarberg 8mo ago
      Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.
    • chrisweekly 8mo ago
      Colocation is a useful principle in component-based architecture.
      • apsurd 8mo ago
        In my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) break legacy. so shared components bloat to address every evolving need. And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy! TLDR: i almost always end up branching out into evergreen "reusable" components anyway. Very unlikely the component library the CTO asked claude to DRY up the code with, is the one to rule them all.
        • halfcat 8mo ago
          FWIW, “colocation in component-based architecture” doesn’t necessarily mean shared code. It can just mean the one thing has all of its parts in one place, instead of having HTML in one file, CSS in another, JS in another. You’re right about DRY and code reuse very often being a premiere (wrong) abstraction, which is usually more of a problem than a few copy/pastes, because premature wrong abstractions become entrenched and harder to displace.
      • temporallobe 8mo ago
        As much hate as it gets, this is one thing I like about Angular.
        • cush 8mo ago
          imo Angular would have won had it figured out a stronger path from v1 to v2
          • jamesfinlayson 8mo ago
            Angular is pretty decent in that it gives you everything you need (the concept of a page and routing, services etc) but one thing I'll give React is the simplicity of changes to attributes just triggering updates.
          • pjmlp 8mo ago
            From where I am standing it is mostly Angular or Next.js, both have separation of HTML and CSS by default, naturally they cannot block someone to come in and put tailwind on the project.
    • afiori 8mo ago
      Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element. @scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance
      • robertoandred 8mo ago
        This problem was solved a long time ago with CSS Modules.
        • christophilus 8mo ago
          I prefer almost anything to CSS modules, so this bike shedding topic is probably very subjective.
      • the_other 8mo ago
        > Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Then <a type=b> is potentially a <c>. Consider a small refactor?
    • ewuhic 8mo ago
      Is staying in one file supposed to be difficult or something?
      • luckylion 8mo ago
        this is grey text from tailwindcss.com, I wouldn't call it easy and readable. <div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.</p></div>
        • what 8mo ago
          That’s actually disgusting.
          • paradox460 8mo ago
            It gets worse Check out the Netlify admin dashboard screenshot in my blog post https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/#bigmess https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
            • troupo 8mo ago
              There's nothing in Tailwind that makes the craftsmanship dead, and your proposed solution with scoped styles somehow a revival of said craftsmanship. Note how your solution literally depends on a build tool (Vue) to work. Whereas Tailwind can work with no build tools (tailwind build tools removes unused classes, and that's mostly it). And then you go: --- start quote --- Juniors still come along and just do margin: 13px. In tailwind, they do m-[13px]. No difference. At least with CSS its centralized. --- end quote --- When your scoped CSS example is literally decentralized per-file CSS that has `margin: 5px` in it. That gets compiled into a meaningless `class-678x8789g` by the build tool. > The people I've seen who are most excited over tailwind are generally those that would view frontend as something they have to do, not something they want to do. Tailwind is the product of its era: where even sites are composed out of components. That is, this separation of concerns: https://x.com/simonswiss/status/1664736786671869952 https://x.com/simonswiss/status/1664736786671869952 As a comparison, here's Youtube's expertly crafted CSS (which is actually an improvement over their original 6B file). Note how much endless repetition there is: https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb.kevlar_base.D3GEurry95Y.L.W1.O/am=AACAAIAAAg0/d=0/br=1/rs=AGKMywHlqLEnoES9HlRgWKxLMqdaAP827Q https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb...
    • dbbk 8mo ago
      You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.
      • halfcat 8mo ago
        Cognitive load of looking at 12 open files trying to understand what’s happening. Well, in fairness some of those 12 are the same file because we have one part for the default CSS and then one for the media query that’s 900 lines further down the file.
        • bobthepanda 8mo ago
          Css modules gets away from the larger sins of the massive global css files. If modules had existed much earlier it probably would’ve gotten rid of most of the awfulness.
          • UqWBcuFx6NV4r 8mo ago
            Oh, great. So let’s just 2x all our files then! All for, what exactly? It sounds like you just want to write Java.
            • bobthepanda 8mo ago
              If you have a complaint about your styles being so complicated and in a giant 900 line mega file, I don’t see how you address physical size other than breaking up the file. Granted, nesting support was also added fairly recently in the grand scheme of things, which boggles the mind given how it was such an obvious problem and solution that CSS preprocessing came about to address it.
          • agos 8mo ago
            CSS Modules are way older than Tailwind, but alas it was not enough
        • dbbk 8mo ago
          What do you mean 12 files? It’s 2 files. One for your component and one for its styles module.
    • onion2k 8mo ago
      Yes. The problem is that the styles for something can be defined in multiple places, and that makes it hard. Especially with CSS and (potentially) having specificity issues if things aren't managed well. Having them as a part of the component means that problem goes away.
    • mattacular 8mo ago
      I find it to be more difficult. Especially if I can't pane the files in view comfortably (ie. beyond 2 or 3 it gets significantly harder to work across them). Some frameworks or coding styles really lean into having lots of tiny files. That necessitates a more complicated directory structure for the project. Locating files eventually tends to requires search capability rather than being able to look through the tree in a sidebar. None of this is "hard" per se but I find the opposite is nicer to work with typically.
  • paradox460 8mo ago
    Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles
    • h4x0rr 8mo ago
      I worked with both. Scoped styles are nice. Tailwind is better - no naming of every element, no mental tax of jumping around in the file -
    • Kiro 8mo ago
      Jumping up and down in the file is not much better and you still need to come up with names for classes. I want to look at an element and immediately know how it's styled.
      • agos 8mo ago
        From Tailwind's home page: <div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10">[...] "immediately" is a stretch
        • Kiro 8mo ago
          You can fold it, format it, and IDEs preview it. This is like me posting the equivalent CSS in one big line. But even without all that I still prefer this over dealing with cascading styles in stylesheets. Never again.
          • agos 8mo ago
            dealing with the cascade and tailwind are not the only two options
        • rafark 8mo ago
          Thanks for proving the point. I haven’t even seen that element rendered and I already have a good mental picture of what it is and what it looks like.
  • zelphirkalt 8mo ago
    What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.
• crooked-v 8mo ago
  Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.
  • spartanatreyu 8mo ago
    The "C" (Cascade) in CSS doesn't suck, the education about it sucks. People don't know how it works, then things go wrong so they learn to work around it. That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind. The cascade is actually awesome, super powerful and if you know how to use it, it can greatly simplify your code. Education is the problem and the solution. --- To anyone outside the CSS space, this is the closest analogy I can find: In the American education system, there was a recent-ish change where children are "taught" to read using a method of just learning the shape of every word (e.g. "thermally" has a th at the start and ly at the end, so it must be the word "thermally", despite other similar looking words like thematically). The method was disproven but the American education system still uses it. Now illiteracy rates are climbing where almost 1/4 Americans (USA) can't read. It's basically the same thing with CSS, where developers don't know what the code they're reading/writing is actually going to do.
    • paradox460 8mo ago
      I call it cargo cult developing. People develop bags of spells and tricks that they attempt to apply to a situation to solve a problem. Usually they can arrive at a solution by trying a number of these incantations, but not always. And never actually ask them what the incantation does It's not just css either. At a job I've worked, we had a VPN client that would get into a weird state, where it needed to be killed to restart. An incantation that made use of ps, grep, awk, and xargs was provided, instead of just using pkill
    • troupo 8mo ago
      > That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind. You could try and think why people end up with BEM or Tailwind. And the answer isn't "because people are not educated about cascade". Both BEM and Tailwind came form people who are very much aware of the cascade. The problem is that cascade is very much a hindrance in quite a few cases. Especially when you deal with components and design systems. > To anyone outside the CSS space, this is the closest analogy I can find All analogies are bullshit. The truth is that CSS is designed for documents, and for a few decades people have been trying to use it to design/build components: https://x.com/simonswiss/status/1664736786671869952 https://x.com/simonswiss/status/1664736786671869952 Cascade is good for the former, and is death for the latter. And browser vendors have been surprisingly stubborn when it comes to making any improvements to the DX in this area. That's why instead of locally scoped CSS, CSS nesting, CSS mixins (and a bunch of other improvements from SASS and various JS Frameworks) we first got 15 000 JS-only specs around web components, of which 14 999 can be covered by improvements to CSS. > where developers don't know what the code they're reading/writing is actually going to do. Lol. Tailwind has made people more aware of what CSS does, with better documentation, than decades of bullshit articles and millions of words of existing docs.
• mattlondon 8mo ago
  Wait until you see React & JSX... At least html and CSS are both presentation. React/JSX now confuses presentation and business logic.
  • madeofpalk 8mo ago
    I think you're confusing business logic with view logic.
  • lateforwork 8mo ago
    > React/JSX now confuses presentation and business logic React was originally designed to be the "V in MVC". You can still use it that way. React becomes very simple when you only use it as the V in MVC.
    • azangru 8mo ago
      What are the M and the C, and how do they talk to the V in this case?
      • cbarrick 8mo ago
        - M for Model: your data model. - V for View: views of your data. - C for Controller: does stuff with your data.
      • apsurd 8mo ago
        react can be pure functions that take in props. Given a set of props, ideally data primitives, the outputted view is guaranteed. it's nice. In practice, the entire JS ecosystem enjoys flying off the rails, every season, but it's not strictly react's fault. To answer your question, however those props get into the component is up the the M & C. can be async server, or shoved in as json in the script tag.
        • azangru 8mo ago
          If you move the data (the M and the C) entirely out of react, and only pass it in via props, there would be only one place — the root react node — where the props could get into react. Is this what you have in mind? Or are you envisioning multiple root nodes?
• namuol 8mo ago
  The deadest horse in web development is the myth of “separation of concerns”
  • appplication 8mo ago
    You can separate concerns without violating locality of behavior, and that’s exactly what tailwind does. It admittedly does not do a good job at being very DRY but I think that’s poorly applied to HTML/CSS in general, and the most DRY css is often over abstracted to the point of becoming nigh uninterpretable.
    • nine_k 8mo ago
      When I write CSS, I most often do not want the locality of behavior. I instead want uniformity of behavior, hence "semantic" styles. Even the trivial light / dark mode switching is pain with Tailwind, when classes like "color-gray-200" are routinely applied.
      • appplication 8mo ago
        I’d somewhat agree with you there, but I usually use variables for uniformity. I do see arguments against tailwind but find anytime I’ve tried to do anything else it just feels like bikeshedding on internals for the same end result. Really what I want to see is beautiful TDD for CSS so that uniformity can be enforced, but I’m not sure that exists.
        • nine_k 8mo ago
          Variables are hugely helpful, I agreee. IDK about bikeshedding. I'm very used to writing React code that normally declares no styles for components at all, and having CSS that style components using 1-2 classes, specific to these components. Container components control margins, <body> controls general things like fonts. It seems that what solves the problem is a good component library. "But I need red text here!" For what reason? It's a warning. OK, we've got <Text variant="warning">, it will be styled appropriately, and will look like every other warning in the application.
• Sateeshm 8mo ago
  Tailwind is not what you're describing.
  • digitalPhonix 8mo ago
    Isn’t that what utility classes are? Shorthand for inline styles? Not saying it’s good/bad, but it feels like that’s the use case
    • francislavoie 8mo ago
      It's much more than that because it can make use of CSS pseudo selectors like hover, which is not possible with inline styles.
    • rafark 8mo ago
      Under that definition any css class is a shorthand for inline styles
      • digitalPhonix 8mo ago
        There's a big difference between utility classes which are shorthand for inline styles (random example from Tailwind's site where every single class is a one-to-one mapping with a single style override.): class="ml-3 hidden rounded-lg bg-gray-100 px-2 py-0.5 text-xs/6 font-semibold whitespace-nowrap text-gray-700 lg:block dark:bg-gray-400/15 dark:text-gray-300" and semantic names which use the CSS cascade: class="main-content subheading" Calling that a shorthand for inline styles is just being obtuse.
    • Sateeshm 8mo ago
      Media queries, pseudo selectors, extensible design system with sensible and practical defaults, and many more
• darekkay 8mo ago
  HTML vs. CSS is a separation of technologies. If HTML was really only about the content and the CSS was only about styling, we wouldn't have to write div soups to style our websites (.container-wrapper .container .container-inner { /* "separation" */ }) and we wouldn't have to adjust our HTML when we change the layout.
  • fainpul 8mo ago
    > we wouldn't have to adjust our HTML when we change the layout. You don't have to: https://csszengarden.com/ https://csszengarden.com/
    • troupo 8mo ago
      And if you read the CSS there, it's an unmaintainable mess of absolutely positioned elements
    • ruszki 8mo ago
      But for that designers should care about the limitations. But they don’t care. Not even about the more basic ones. I’m quite sure many of them don’t even know. Mainly, because their customers are not the one who code. I got many designs for websites where customers told me that they want a pixel perfect version. The funniest one was when my boss who supposed to be a “senior” web developer told me this. Of course, there is no such thing on the web or really anywhere. Actually, I’ve never seen a design plan in which wildly different aspect ratios and sizes were really considered.
      • zelphirkalt 8mo ago
        This doesn't solve the problem but: If the designer is not aware of the ins and outs of the medium they are supposedly working with, they are not a very well informed and educated designer. Just like I don't presume to be able to make a great product packaging design, without knowing firstly much more about visual composition and design, but also secondly the material and form and shape I am designing for. Will that be a plastic wrapper, a paper wrapper or some cardboard packaging? Without knowing the limitations and properties of each, how can I expect to create a good design? Being that uninformed to me seems like not giving a shit about the quality of work one delivers, ergo not giving a shit about ones job, or simply not having the required understanding or skill to be any good at ones job.
• raincole 8mo ago
  Yeah and it's a really good idea. You can't really 'separate layout from style.' The layout and the style are both parts of the UI. HTML isn't the content, it's the layout. Even if you believe separation of concerns is the eleventh commandment, HTML and CSS are the same kind of 'concern' anyway. They're both at representation layer. Pretending you can decouple them is just burying the head in the sand.
  • Sateeshm 8mo ago
    Thank you. This just makes sense. In fact, seperating them into different files don't make much sense when you think about it.
• nilslindemann 8mo ago
  Yeah. There is no need to obfuscate your code, just use Tailwind.
  • namuol 8mo ago
    Obfuscate? I can learn tailwind and use it in dozens of projects. I can use tailwind in my project and onboard dozens of developers immediately. I can learn your CSS conventions and use them in exactly one project.
    • nilslindemann 8mo ago
      Why can you use CSS conventions in only one project?
      • manuelmoreale 8mo ago
        He wrote "learn your CSS conventions" which implies that every team and every project will have a different set of conventions. Hidden inside that statement is the fact that he just accepted that Tailwind should be THE CSS convention, something I personally disagree with but to each their own.
        • namuol 8mo ago
          No. Tailwind is a way of writing css, not a convention. By “your” convention I’m referring to the problems with the cascade, ie naming classes and so on. I’m not saying tailwind is the only other way. There are many ways to write CSS but doing it with something bespoke for your situation is usually a bad idea.
      • UqWBcuFx6NV4r 8mo ago
        Can we all just drop words out of comments that we reply to if it makes it easier to make our point?
      • namuol 8mo ago
        You can try to rely on conventions across projects, sure. It doesn’t work well.
• sylario 8mo ago
  I do not work frontend and yet, I always end up having to do some CSS here and there. I have never been happy on how I manage CSS. With tailwind, I am still unhappy about my styles but I can make my ugly UIs faster.
• mb2100 8mo ago
  If everything in your code is a React component, I get why you would just want to write the styles right there.[0] Then again, why write `<Button>` if you could just write `<button>` and style it with standard CSS. [0]: https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-inline-styles-tailwind/ https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...
  • rafark 8mo ago
    Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to <buttton> and call it a day. For example, an upvote (^) button, a close (x) button, etc. A lot of clickable elements aren’t inside a [click me] box
    • mb2100 8mo ago
      button, .button { /* my button styles */ }
  • skeptic_ai 8mo ago
    What if you need 3 levels of html tags?
  • ggregoire 8mo ago
    > If everything in your code is a React component, I get why you would just want to write the styles right there. Even for keeping the style close to the component, you can just use standard css. Create a folder Button, create two files Button.tsx and Button.css in that folder, import the css file in the tsx file, add a class "button" on the first element the tsx file renders, start all the rules in the css file with ".button " to encapsulate the style. People will say it's too much work, but it took me like 5 sec.
    • mb2100 8mo ago
      if you're not using CSS modules, why would you import the css file into your javascript? But anyway, I think we agree. Feel free to read the linked blog post ;-)
• skeptic_ai 8mo ago
  That’s separation of technology not concerns. The concern is the component itself.
  • peacebeard 8mo ago
    Well put.
• rafael-lua 8mo ago
  Are we still complaining about Tailwind? This ship has sailed. The world is so much better than the old BEM/LESS hell, it is wonderful. UnoCSS is even greater in empowering frontend developers.
  • AltruisticGapHN 8mo ago
    BEM is actually not hell, since the whole point is to have classes with a specificity of 1, making precedence of CSS rules easy to figure out. Non-BEM CSS with ids and multi-classes everywhere was hell.
    • exodust 8mo ago
      Agreed. I owe a beer to whoever thought of BEM. It's saved precious brain cycles thinking of names. At first I was like what is this bem__opinion--rubbish but then it clicked and my workflow improved.
• chasd00 8mo ago
  If I may be so bold, the coding agents are really good at this stuff. Save yourself the pain of front end and make a clanker do it. Or at least make the clanker to the heavy lifting and just do tweaks yourself.
• abustamam 8mo ago
  Having worked on teams that wrote bad (S)CSS and teams that wrote bad tailwind, I prefer bad tailwind. With tailwind, I can guarantee that changing a style in one component will only change that component. With css, there is no such guarantee. So of course the (wrong) way many devs fix it that is to add a new class, probably doubly specific, sometimes with important, and then everyone is sad.
• rafark 8mo ago
  And thank god (or Adam) for that. Tailwind makes me much more productive.
• cush 8mo ago
  Separation of formatting/representation was invented? Where was I?
• saidinesh5 8mo ago
  It really depends on the websites no? If you're building a "webapp" where you think in terms of components, no point keeping the style sheet separate.. If you're building a "website" which is basically a list of hyperlinked documents with the same styling, having just one style sheet would make sense... Of course, there's a lot of gray area in between the two... At the end of the day, the most that most of us can really do is be annoyed at the quirks of these leaky abstractions in the large codebases that's thrust upon us.