ℹ️ This is a reply to Johan Ronsse’s post “Overengineered Packages?”. Be sure to read it first.
After having posted about the class-names package, Johan turned to Twitter to state that the package overengineered. In a follow-up blogpost he argues that:
At the moment I feel like it’s only invented because of a deeper problem: trying to write CSS in Javascript.
To me this statement is the exact opposite of what I use the classnames package for. The use of classnames actually allows me to still write CSS in CSS, instead of having me chuff CSS into JS.
Take this demo for example:
Thanks to the classnames package I can easily translate the Button props to CSS classnames. Therefore I can keep on styling as I would normally do, using good ol’ CSS — not a single line of CSS-in-JS in sight 🙂
The code itself is also quite readable, especially when compared to a version without classnames. See these snippets by Sebastian for example:
Sebastian and I use props in the same way here: a prop (or combination of props) lines up with a CSS class to apply (or not apply).
~
Now, I can see why Johan thinks the package is meant to replace CSS with CSS-in-JS. The basic example included with classnames is this:
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});… and that’s of course – as Johan stated himself too – something that can perfectly be done with CSS:
.btn:hover { /* Styles */ }
.btn:active { /* Styles */ }A bad example 🤦♂️, leading to some a lot of confusion.
~
# 🤔 In case you’re wondering why I like to write CSS in CSS, and not in JS: Jeremy Keith’s post “Robustness and least power” explains it quite well. In said post he quotes Derek Featherstone:
In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works.
— Data attributes & progressive enhancement by Derek Featherstone
Above that, by using “just CSS” it makes my styles portable across implementations. Say I want to switch from a jQuery project to a WordPress site or to React implementation or to something vanilla … I just link up the CSS file and voilà, done! If I need to update the visual representation of say a heading, I simply update the CSS, without needing to update the component in the React app + the markup in the WordPress site + etc.
Leave a comment