![]() ![]() ![]() For the curious, I’ve linked some good articles comparing “CSS in JS” to modular CSS at the bottom. “CSS in JS,” using JavaScript objects to style components, has been gaining a lot of popularity, but there are still a lot of advantages to using a style language. Modularizing styles to mirror the modularized JavaScript components has been a hot topic since 2014. btn are converted to a globally unique name such as. This is possible because under the hood, the human-readable versions of the class names such as. This scoping enables you to have duplicate class names between files without any conflicts. css file and treat the class names as locally scoped variables, as opposed to the traditional CSS approach of having globally scoped variables. What are CSS-Modules?Ī CSS file in which all class names and animation names are scoped locally by default. Note: SCSS + CSS Modules can be used with most web frameworks, but I will be using React in my examples. I’ll go through each piece of the architecture, followed by organizational and usage suggestions. ![]() With the help of css-loader and webpack, we imported our styles and class names directly into our React apps.ĭeciding on this structure all came down to long-term maintainability and improving the developer experience by making it more enjoyable to style a web application. All of our classes were locally scoped utilizing SCSS and css-modules. You can see our end product at Clover’s homepage. btn-secondary) to our DOM elements, yet we still built out some pretty complicated designs. In one of my most recent projects, we didn’t have any global CSS classes. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |