CSS in JS hipster's turd



  • The horror show project from a year ago just got a fresh new refactoring from scratch. Instead of an old dusty Symfony MVC app, we now have a nice modern react app + laravel API.

    The initial guy in charge of the project did a basic, minimally styled frontend using SASS + bootstrap (a reasonable choice for an admin-panel style app). But just as he was finishing the initial prototype, he left for greener pastures. Boss had to hire contractors to take the project over for the "final polish".

    The backend was given to the mediocre code leaker guy I ranted about earlier, and that had hobbled along reasonably well (it had since been taken over by a better coder).

    The frontend went to this react.js guru boss had found on linkedin. The guy had a pretty decent looking CV and a big portfolio. So Boss just sent him the design document and let him loose with little supervision.

    Big mistake.

    Turns out this guy is deep into this new hipster thing called "CSS in js". TLDR instead of using CSS and classes (so last week!), you style the entire app using inline CSS styles that you manage through javascript. While this has some merit, I suspect the contractor was guided more by what would look good in his portfolio than what is the correct choice for the project.

    Anyway, the guy refused to touch SASS and all his changes were made inline. Which would be fine, if he bothered to remove and refactor old SASS styles.

    Instead, he just left the entire old stylesheet lying there like a turd and worked around it.

    So now half the app is in SASS, the other half in inline styles. No variables anywhere, copy-paste hard-coded colors, dimensions. It's a mess.

    As usual, the contractor charged for his time and moved on. And now its up to us to somehow manage this split brain mess he left behind. The project hasn't even been launched yet, and there is already talk about redesign.

    I HATE contractors.


  • FoxDev

    @cartman82 said in CSS in JS hipster's turd:

    you style the entire app using inline CSS styles that you manage through javascript

    0_1504520168398_No (2).gif

    Setting inline styles via JS may be OK for some scenarios involving a handful of elements where styling them any other way would be more complicated, but you should never style an entire app that way.



  • @raceprouk said in CSS in JS hipster's turd:

    Setting inline styles via JS may be OK for some scenarios involving a handful of elements where styling them any other way would be more complicated, but you should never style an entire app that way.

    The idea is to abstract styling from browser implementation. This allows you to

    • share more of your code between platforms (eg. mobile and web react apps using the same components)
    • have more dynamic themes

    Also, some of the CSS features (like media queries) don't work so well in component based design, so either way you'll want to outsource some of the CSS to javascript.

    But that's all 3-5 years in the future. IMO the tech is still too immature to be used in todays' apps.


  • FoxDev

    @cartman82 said in CSS in JS hipster's turd:

    But that's all 3-5 years in the future. IMO the tech is still too immature to be used in todays' apps.

    And by the time it is mature, CSS will likely have been updated to support a lot of that fancy stuff anyway.

    CSS in JS will probably never go away entirely: there'll always be a niche for it. But as with any other tool, use it for the right jobs, not as a global solution.



  • @cartman82 It just so happens that CSS has its own DOM API. If someone wants a dynamic theme, they don't have to shove rules on the individual elements; they can change the CSS file's rulesets themselves, as though it's a sheet of styles, at runtime and let them, like, cascade.

    ... Nah, it'll never catch on.



  • @twelvebaud said in CSS in JS hipster's turd:

    @cartman82 It just so happens that CSS has its own DOM API. If someone wants a dynamic theme, they don't have to shove rules on the individual elements; they can change the CSS file's rulesets themselves, as though it's a sheet of styles, at runtime and let them, like, cascade.
    ... Nah, it'll never catch on.

    You mean like, remove the old <style> tag, add new one?


  • đźš˝ Regular

    @cartman82 Well, there's the CSSOM, but that might work.


  • đźš˝ Regular

    Huh, this flew under my radar: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

    There's reasonable support: http://caniuse.com/#feat=css-variables

    But why did they use a -- prefix instead of $ or @ like in Sass or Less? Yuck.


  • Discourse touched me in a no-no place

    @zecc said in CSS in JS hipster's turd:

    But why did they use a -- prefix instead of $ or @ like in Sass or Less? Yuck.

    So you can easily use CSS variables with Sass and Less.


  • đźš˝ Regular

    @dkf That's a good point.



  • It seems we'll throw away all the CSS this guy made and start from scratch with pure SASS + bootstrap.

    Porno guy was hired full time (without mettle) and put in charge of the cleanup effort.

    5th time the charm.



  • @cartman82 said in CSS in JS hipster's turd:

    Porno guy was hired full time (without mettle) and put in charge of the cleanup effort.

    Since, in the porno industry, things can really get messy, he's probably a good fit for a cleanup effort :giggity:



  • @zecc said in CSS in JS hipster's turd:

    But why did they use a -- prefix instead of $ or @ like in Sass or Less? Yuck.

    @ wouldn't work because it’s already used for things like @import and @media. I’m guessing they went with -- because it’s similar to the way browser-specific extensions work: -webkit-foo — so it kind of just leaves out the browser/engine name.


Log in to reply