Skip to main content
Home / Articles /

CSS-in-JS: FTW || WTF?

Avatar of Chris Coyier
Author
Chris Coyier
Published

Learn Development at Frontend Masters

I enjoyed Bruce Lawson’s talk on this holiest of wars. It’s funny and lighthearted while being well researched and fairly portraying the good arguments on both sides.

Frontend Masters logo

Need some front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Comments

  1. User Avatar
    Vanderson
    Permalink to comment#

    There needs to be a name for the phenomenon demonstrated in this video. Large companies that work on single projects that at the bleeding edge of technology pushing outside the bounds of concept and design. (LCTWOSPBETPOBCD, stupid acronym)

    jQuery did this and some of the results made it into the core of the browser.

    What this means is that none of it’s useful for “normal/average” developers. Why? Because it simply costs too much to learn, use and then clean out the mess later on when the browser vendors implement the best ideas and reject the others.

    The “limitations” of their idea (ie, can’t change an inline to a block and vice versa) is purely arbitrary, and this kind of thing stinks of their own personal opinions about how thing should be done.

    The end result? Wait a couple years, keep doing what we are doing, and add the new cool stuff when it’s available. This is bleeding edge ideas that are only useful for LCTWOSPBETPOBCD. (or maybe Large Company Single Project?)

    • User Avatar
      Tolis
      Permalink to comment#

      So, if we all keep doing what we are doing who is going to think of the new cool stuff?

  2. User Avatar
    Matias Olivares Trujillo
    Permalink to comment#

    Good video, but analyzing more in detail I like more the selection by attribute [attribute] that selector::state.

    I have developed a similar solution that applies this selection by attributes.

    css

    :this{
    width : 100px;
    height : 100px;
}

:this[size="small"]{
    width : 50px;
    height : 50px;
}

:this[size="large"]{
    width : 200px;
    height : 200px;
}

    The style sheet will create a component, which replaces :this with a random class.

    https://uppercod.github.io/cssthis-demo/

This comment thread is closed. If you have important information to share, please contact us.
Jetpack Logo

The related posts above were algorithmically generated and displayed here without any load on my server at all, thanks to Jetpack.