Learning about CSS architecture
Tags: css, javascript, beginners
Published: 2019-12-22 05:27:12

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. 

```html
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] (https://www.cmcrossroads.com/article/risk-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:


```javascript
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 <div> class name would be given a randomized name such as:

```html
<div class="App__App__2NQx7"></div>
```
whereas, our generated CSS file would have this related class name:

```css
.App__App__2NQx7 {
    text-align: center;
}
```

[CSS Modules] (https://github.com/css-modules/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](https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b) 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] (https://css-tricks.com/) site. It has a ton of useful information and new and innovative ways to use CSS in your applications! 

####Useful Resources

* [The Many Ways to Include CSS in JavaScript Applications] (https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/)

* [What are CSS Modules and why do we need them?] (https://css-tricks.com/css-modules-part-1-need/)