loading...

What is your opinion on CSS in JS and generating Static sites from JS frameworks?

ardennl profile image Arden de Raaij ・2 min read

There seems to be a discussion going on about the use of CSS-in-JS and using JavaScript frameworks to generate static sites. One team is convinced that doing anything in JavaScript that you can do with HTML or CSS is grossly over-complicating stuff, the other team loves using all the new tools and feels like their solutions solve great problems.

The Twitter rants I've seen about this subject have yet to be more than people presenting their own opinion as an immutable state (please kill me now), which isn't very informative on the topic. What does shine through is that there seems to be a gap in the domain of front-end development between developers who came in the traditional route, using HTML, CSS and a sprinkle of JavaScript as their base and developers who totally went for learning JavaScript libraries / frameworks and almost see CSS and HTML as the side-thing.

Confession time: All the talk about frameworks, etc. can seem scary if you haven't really read up on them. At my old job, the back-end developer also handled a few assignments that needed React because I totally wasn't ready for that level of Front-end / JavaScript complexity. I did feel bad about it. I never signed up for using scary JavaScript frameworks, but here it was and it was supposed to be part of my domain.

Now I'm totally hip with it, but if this discussion was raging as much two years ago, I'd probably have a knee-jerk reaction towards solutions based on JavaScript frameworks.

I'll be writing a full article about this topic soon but right now I'd like web developers to share their opinion on this topic.

What do you think of CSS in JS and JavaScript frameworks. Also, what is your background and from which route id you enter web development?

Some articles on the subject:

Thank you for your time!

Posted on by:

ardennl profile

Arden de Raaij

@ardennl

Front-end developer based in Lisbon, co-founder of cfye.com and enjoyer of beaches and waves.

Discussion

pic
Editor guide
 

In short (and general): Always make something in the less complex way possible.

I'm not a big fan of using frameworks myself, partly because it takes the craftwork out my work. (Yeah, I came the traditional route. You talking CSS? Where I came from there was no CSS.)

I'm also not a hater, I use it if it can do stuff I need and can't make it happen without the framework.

It's like painting. Just use the brushes you need to get the painting done.

 

CSS in JS is the way to return to the soup-coding behaviour we extracted ourselves from in the first times of internet dev.
JS should only be used to alter dynamic properties when needed ie: when can NOT set (all) fixed values in CSS.
Separation of concerns is important or else we will, again, end with some code that is a mess and you don't even know where to search for updating/correcting something.
I personnaly am sick when i see stuff like :

function open(element){
    $(element).css('height', '77px');
}

that's a mistake not only because you have to search JS code in case of change but because you are taking responsability for something that is not your job : design.

Just change the class, ask the designer to make another class and everyone keeps their responsaility and work on their duties.
As a final note many coders have the false idea that design is just a matter of coulours and fonts : IT IS A NOT, it's a job , people go to school for this, trust them and focus on code.

 

I think the right answer depends on your organizational structure. Do you have centralized branding / designers? Use centralized styling for consistency and let people opt into it as needed. Do you have embedded designers or devs on the team who also design? Use localized styling to avoid conflicts. Are you a business dev who wants to expend minimum effort to get a decently styled app? Use a CSS framework with pre-built centralized styles for most things.

Personally, I don't use CSS-in-JS. I mainly tweak classes or have alternative rendering based on current state. But I could see it being useful for highly independent teams in a larger organization. Not as a once-and-for-all answer.