As I dive deeper into Javascript and its accompanying libraries and frameworks, I’m learning more about CSS and the many ways that I can structure my styling that both makes sense for the project and deliver cleaner code. Since I was not aware of CSS architecture outside of CSS stylesheets and inline styling, I thought I’d share some additional ways on how to use CSS in your project and when some methods may be more useful than others.
Stylesheet
Probably the most well-known and (usually) simplest is the CSS stylesheet. This is what many of us have used when first being introduced to import stylesheets and injecting styling into our applications.
index.html
<link rel="stylesheet" href="style.css">
Stylesheets definitely serve their purpose in smaller applications or ones that do not call for much styling at all. They can be very useful for beginners to understand the magic of CSS and how basic web application files work together to make a fully-fledged webpage. Another benefit is that a single CSS stylesheet can be cached by the browser only once, which will remove the need for returning users' browsers to download the file again. However, if we have larger applications or applications that can be built to scale, stylesheets can quickly become very large and incomprehensible. Thankfully, there are other options for these cases!
CSS Modules
As in most software systems, the risk of regression is something also to consider when deciding upon your CSS architecture. The risk of regression is the idea that as a system or application ages and expands, the likelihood that any updates made having unforeseen consequences increases. However, to minimize the risk of regression in terms of CSS architecture, CSS modules are a useful resource.
Put simply, CSS modules are "CSS files in which all class names and animation names are scoped locally by default". This means that all components will have automatically-generated unique class names that are specific to that individual component. To use CSS modules, you will write your markup within your .js file as such:
index.js
import classes from "./App.css"
`<div class="${classes.App}">`</div>
If we were to open our generated HTML file, we would see that our
class name would be given a randomized name such as:<div class="App__App__2NQx7"></div>
whereas, our generated CSS file would have this related class name:
.App__App__2NQx7 {
text-align: center;
}
CSS Modules allow you to have multiple components that all have unique, specific class names to avoid duplication and confusion. These are especially useful for larger applications and ones where scoped styling could be especially useful.
CSS-in-JS
There are quite a few frameworks out there that make using CSS in your Javascript as simple as possible. Here are a few listed for 2019. In CSS-in-JSS packages, the styles are scoped and class names are hashed, quite similarly to CSS Modules.
In CSS-in-JS packages, you write CSS as you normally would for each component and the CSS framework then compiles the application and creates unique classnames. A major difference between CSS Modules and CSS-in-JS packages is that the CSS styling will only be returned for the components that are rendered on the page at that time. This allows more overall quicker load times and does not block rendering.
To learn more about CSS-in-JSS or any of the other methods mentioned in this article, I'd highly suggest checking out the articles linked below and the CSS Tricks site. It has a ton of useful information and new and innovative ways to use CSS in your applications!
Top comments (4)
Congrats on your first post!
Or you could use scss/sass. That way you can create a nice file structure and still benefit from the cascade. This creates 1 css file and will give you the caching advantage as you mentioned.
Yes but you need to add a BEM methodology or something else
Not at all. Just make sure to structure your scss files in a good way and give logical named to classes and ID'S.
BEM is a good practice to use in big teams. You could and should use it in other architectures as well.
I will admit it takes a bit more thought beforehand to do it right. But you can prevent a lot of duplicate code this way.
IMO scoped css makes people lazy and they are going to make a big mess because it does not break anything.
It does however break the ability to quickly change your styles.