Many CSS-in-JS libraries claim to offer a better way by directly tying the scope of a CSS styling rule to the JavaScript “component” it means to style. block classname.Įntire design systems and CSS frameworks (like Bootstrap or Tailwind) are created to solve these problems by tying styles to components, tokens, or utility classes. block_element-modifier) CSS rule is limited to the html element with the. For example, ITCSS and BEM create pseudo-scopes of layout objects, blocks/components, elements, settings, tools, etc. If you’ve ever worked through a CSS issue that has to do with “specificity,” “hierarchy,” or “the cascade,” that probably means you had an issue with global scope.Īt Sparkbox and in the wider frontend web community, the way we eliminate these types of global scope-related bugs is by sticking to a sincere strategy for organizing our CSS. CSS relies on the “cascade” part of “cascading style sheets” to determine priority order of rules. Why? What Is The Problem CSS-in-JS Is Trying to Solve?ĭeveloper complaints about CSS can mostly be combined into one programmatic issue: Everything in CSS is “globally scoped.” This means that all CSS rules are equally accessible by all of the code.
However, here I am, having used exclusively CSS-in-JS in enterprise design system environments for the last 2+ years. And just as many JavaScript developers can’t understand why you wouldn’t want CSS-in-JS. In fact, many folks who learned to love CSS without JavaScript balk at the idea of CSS-in-JS. Wouldn’t it add package weight to my project? Isn’t it over-engineering? A large number of CSS and SCSS developers share these concerns. Many of our clients at Sparkbox choose a similar approach.Īs someone who loves Sass more than almost any other web language, I was hesitant at first to use CSS-in-JS. Huge companies like Reddit, Atlassian, and Patreon have made the move toward a CSS-in-JS solution. With the rise in popularity of JavaScript frameworks like React, Angular, and Vue, many organizations are choosing to use CSS-in-JS in production. The discussion about CSS-in-JS, and whether or not to use it in your projects, has been active for nearly half a decade now.
0 kommentar(er)
