The Future of CSS

(joshwcomeau.com)

71 points | by soheilpro 2 hours ago

14 comments

  • paczki 14 minutes ago
    As someone who actively goes out of my way to stick to writing vanilla HTML/CSS/JS as much as possible, it's honestly hard to explain to people who only write within frameworks how good it's gotten. Use the proper tool for the job, of course, but it sparks joy!
  • afavour 47 minutes ago
    I’m part of the seeming minority that really enjoys working with CSS. And the way I use it today is so different than I did a few years back, e.g CSS modules, declaring a palette with variables then changing it for dark mode… it’s genuinely great to work with.
    • paczki 19 minutes ago
      Working with modern CSS is such a joy, and increasingly as time goes on I'm replacing huge chunks of JS with CSS which is a little boon in itself. Honestly, my only complaint is how long I have to actually wait to use new features.

      Nesting and @layers make maintaining CSS drastically easier than it once was as well.

    • nine_k 11 minutes ago
      Also, grids and flexbox solve so many previously tricky layout problems. Animations obviate a bunch of small JS.

      I sometimes wish that CSS were reduced to the "good parts" and made simpler through it, but I realize that it's infeasible.

      • jamesfinlayson 8 minutes ago
        Yeah with flexbox and fit-content/max-content is pretty fine now.
    • techpression 40 minutes ago
      light-dark() is even better for that :) I also enjoy CSS, using @scope and @layer a lot with the :has() selector, it’s just so different now and I think most people are unaware.
  • CharlesW 1 hour ago
    Since I’m in before the negativity: I love CSS! For whatever reason, it’s always made sense to me. I have great respect for everyone with the tenacity to push on improvements that might take 5-10 years to be in common use, if at all.
  • koolala 37 minutes ago
    The new responsively-sized iframes standard is an exciting one for me not mentioned. It's finally a step beyond the original frames and framesets. It will let us design sites out of iframes as building blocks instead of needing to use web components. Websites made out of websites.
  • herpdyderp 36 minutes ago
    A bit strange to me how Josh beings with heralding the browsers working together and then every mentioned feature is Chrome only. They're nice previews for a potential future I suppose!
  • alberth 33 minutes ago
    Maybe I’m alone, but all of those suggestions seem to make CSS needlessly complex.

    Especially functions.

    Makes me think of a previous post from the author, who wrote 100k lines-of-code to power their blog.

    https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/

    • OuterVale 12 minutes ago
      Worth keeping in mind that Josh's blog is absolutely over-engineered and I'm sure he'd admit that himself. He tried to keep parity with his rather complex course systems and his blog itself is a lot more than 'text on a page'.
    • beej71 10 minutes ago
      At last I can realize my dream of writing a JS interpreter in CSS! ;)
    • gred 31 minutes ago
      Yeah it looks to me like we're scraping the bottom of the barrel, if this is what's left.
    • SadErn 28 minutes ago
      [dead]
  • lopsotronic 55 minutes ago
    Been waiting a long time for CSS inherit() . . . although I freely admit that (and CSS Functions) open a respectable-sized can of worms. Sort of like what transclusion and conditionals do for document markup.

    Anchor Positioning would be sweet and doesn't feel like it's got so much baggage.

  • asdfsa32 16 minutes ago
    HTML and CSS are like bash, no one would use them if it wasn't for the fact that it is everywhere.
  • jamienk 1 hour ago
    Still can't tree shake. It's what makes my old css files grow into monsters. I feel like everyone has given up on this.
    • robertwpearce 15 minutes ago
      For small-scale projects, I use a server-side helper for an HTML page to include only certain CSS, SVG, and JS on a page. Each JS file is tiny, progressive, vanilla JS; SVGs are predefined and generate an SVG sprite that I then consume; CSS pulls in a `base.css`, the page's CSS file, and any component ones pull in their own. It's hand-rolled per project (pre-AI being decent), but I'm proud of it, and it keeps every page tiny. HTTP/2 multiplexing is pretty good and downloads the files more or less in parallel.
    • afavour 56 minutes ago
      CSS modules ought to make it possible. But it’s more or less impossible with regular CSS, you have no idea when a class/ID might be used.
  • derekhong 1 hour ago
    [flagged]
  • jocelyner 33 minutes ago
    [dead]
  • FDEUp 1 hour ago
    [dead]
  • dolebirchwood 25 minutes ago
    [flagged]
  • lioeters 53 minutes ago
    Do we really want functions in CSS? I guess that ship has sailed a while ago, since CSS reached Turing completeness.

      /* Define a function: */
      @function --gradient-to-transparent(--color, --direction: bottom) {
        result: linear-gradient(
          to var(--direction),
          var(--color),
          transparent;
        );
      }
    
    Why not provide better integration with JavaScript, to make this kind of acrobatics unnecessary.
    • afavour 44 minutes ago
      Because JavaScript requires… a lot. A virtual machine, script parsing, etc. Making that a requirement before you even display any content on the page would be a regression.
      • lioeters 38 minutes ago
        I can see that, but CSS already requires a lot, no? Especially as they keep adding new features to it.

        To me it feels like "programming in YAML", the way a declarative language/format acquires more and more features until you're writing functions in an awkward syntax that was never designed for it.

        • afavour 32 minutes ago
          It requires a lot… but a lot less than JS. The awkward declarative nature of it is a side effect of wanting it to parseable at speed.

          At an initial look I agree with you that the functions look very awkward. But I thought the same about CSS variables until I started using them and now I think they’re great so I’ll keep an open mind. I almost wonder if they would have been better off calling them “templates”, or something. “Functions” is going to make people think it’s just like JS.

      • dlcarrier 34 minutes ago
        If CSS is Turing complete, that means it has a virtual machine with parsing and so forth. That means that difference between it and JavaScript is just syntax. (Same for any Turing complete language)