when CSS1 was released, the intent of the specification was to separate the presentation of a document from the document content.The web was not mainstream then and content was still largely document based. Stylesheets were small those days and the overhead of maintainence was less as compared to the benefits that we got from decoupling the content and the presentation.

In the modern web, we rarely think of content in the context of a document. The modern web is dominated by highly dynamic web applications with graphically intensive stylings. Today’s production stylesheets can easily reach into the thousands of lines of code with several hundred selectors.

Below are some of the problems that we face with regular css while scaling our application.

1. Global Namespace : CSS is global, and every rule you write has the potential to affect entirely unrelated parts of the site.

2. Naming Collisions : With a team of developers working on same project chances of naming collisions increases which can have side effects on the overall application.

3. Dead Code Elimination : Your class names and styles (i.e. .css files) are separately located to what is being styled, typically JSX with className or in non-React projects, as separate HTML files. Additionally, as previously mentioned, as CSS is global by default, your styles could be styling unrelated functionality in your application. Jointly, these two concerns make it incredibly difficult to re-factor unused CSS.

4. Sharing Constants: Sharing constants between css and Js is not ideal but there are unfortunately many real world use cases where you need to do it. We have been using comments to solve this issue.

There is a very good presentation made my Christopher Chedeau in which he has discussed the problems arising with regular css and the concept of CSS in JS.

Css in Js

Css in Js is a more powerful abstraction over CSS. It uses the JavaScript as a language to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side.

There are so many css-in-js libraries available today. But we are going to discuss about Emotion.

Emotion-js

Emotion is a performant and flexible CSS-in-JS library. It’s inspired by many other CSS-in-JS libraries like glamglamorstyled-components and glamorous. It allows you to style applications quickly with string styles or object styles. It has predictable composition to avoid specificity issues with CSS.

Css

The primary way to style things in emotion is with css, it accepts styles as a template literal, object, or array of objects and returns a class name.

Styled Components

Styled is a thin wrapper around css. It is used to create react components that have styles attached to them. Styled components also accepts props which can be used to customize the styles.

To demonstrate this I have created a small application which is displaying some user cards in a grid.

My application basically consists two components one is the grid container containing all the cards and another is a single card in the grid. I am using styled components of react-emotion.

 

Flex and DataWrapper are styled components that i will be using in my main container component. Flex can be used at multiple places wherever we want flex layout. Just like background color, we can customize other styles as well to increase the reusability.

Below is my Card component.

Advantages:

  1. Problem of global namespace has been resolved as it generates unique hash based classname for each component while render.
  2. We can create customized reusable components as we can pass customized styles as props to our styled components.
  3. As the styles are tightly coupled with the components there won’t be any unwanted side effects on the DOM.
  4. We can create customized semantic components and use the same over entire application maintaining the consistency.

Links:

To see the whole code you can refer the following links:

  1. grid-demo with regular css
  2. grid-demo with emotion