CSS in JS for Web Components
November 15, 2020
The modern web is written in components and not pages. CSS was designed to declare styles in different files (.CSS) for each page of your web application, and this structure makes it challenging to maintain multiple stylesheets for multiple pages.
The Problem Web Components Solve
Web components have changed the landscape of front-end web development. Using web components provides ample opportunities to reuse and build UI components and custom elements critical in the development process.
Understanding web components might seem daunting for novice web developers. However, let’s take a web application that has two prime features ― a drop-down menu and a navigation menu that appears on every page.
However, this method of building web applications makes it difficult to maintain, because in a big application, you could have hundreds of small files or one extensive file difficult to sort through.
What are Web Components?
A web component contains its own default CSS styling. When a webpage invokes a component, it brings its styling with it.
However, you may not want the default component styles every time and this would require over-riding them. A technical approach to this issue is to create an external stylesheet for each web page inheriting the specific element, but this however also leads to a clogged codebase of CSS files.
Although web components simplify the development process of web applications, with it comes the barrier of maintaining multiple external style sheets when using CSS.
What is CSS-in-JS and how does it benefit CSS Web Components?
The adaptation of CSS-in-JS libraries over CSS is because of stylesheets loading in any order, that sometimes override each other. Before CSS-in-JS, developers applied specific CSS methodologies to ensure modular, reusable, and scalable styling. Some of these methodologies are BEM, OOCSS, and SMACSS amongst others.
CSS-in-JS is an improvement over pure CSS for various reasons, but the end goal is the need for a simpler, easier to maintain codebase. Rather than maintaining multiple external stylesheets, CSS-in-JS solutions provide us with different libraries that each have their unique take on solving the problems of CSS.
CSS-in-JS is the best styling technique to use with web components. But, this doesn’t render CSS redundant because it does have its pros and cons.
Pros of CSS
Inline Styling: The use of inline styles enhances website performance because the browser loads the CSS within elements faster before loading external styles.
Reduction in Redundancy: With inline styles, you can avoid redundant code and only declare CSS styles to a particular element when needed, this way, all extraneous code is removed.
External stylesheets: Inline-styles aren’t the only way to write CSS. External stylesheets keeps your codebase organized and allows you to store all CSS code within a single file and reference them in webpages that need them.
Media Queries: The use of media queries allows you to specify the application of specific CSS rules for a particular screen layout and media types or devices.
Cons of CSS
- Overriding Inline Styles: The advantage of using inline styling is due to the acceleration of website performance, but it also results challenges when trying to override styles.
Overriding styles is a bit of an issue without the
!important keyword. When you use inline styles and try to override them in your stylesheet, you can’t do that without using the
!important keyword is bad CSS practice. It disrupts the natural flow in applying the CSS rules where in properties are applied from top to bottom. With
!important, the property will now give priority to the latest
Compatibility: One disadvantage of CSS is its compatibility issues across browsers. What works in Internet Explorer might not work in Google Chrome. Yet, web developers have to run compatibility tests with their CSS code or write their code based on the browsers accessing the website.
Performance: Using an external stylesheet slows down the performance of your website since all CSS files referenced are loaded at once, even when the page needing them is not currently rendered.
However, the performance hindrances can be mitigated by combining multiple stylesheets and inline CSS, that way it renders only the necessary CSS files on each page. Called critical CSS, this approach is like Styletron’s (a CSS-in-JS library) critical rendering feature.
There are several approaches to adapting CSS-in-JS within your web application. The following are different CSS-in-JS libraries you could use in your web application.
To dive in further, here are some benefits of using JSS in your project:
Conflict-free Selectors: JSS ensures that CSS selectors are collision-free by generating unique class names, which eliminates the need for following naming conventions in CSS.
Real CSS: JSS doesn’t convert your CSS code to inline styles when passed to elements to be rendered on the web, so it still uses real CSS.
Easy Modification: Making changes with JSS becomes more comfortable, because you only need to run down where you declared the CSS rules and make necessary changes within the variable or function. Changes take effect where the variable or function is applied.
- Styled-Components: Styled-components are one of the most used CSS-in-JS libraries. It ensures the usage of ES6 and CSS to style your application with template literals and CSS to make styling easy.
With an intense focus on improving user experience, styled-components enhance CSS styling for React app components. The following are the benefits of using styled-components in your application:
CSS Automation: By using styled-components as your preferred CSS-in-JS solution, it keeps track of which components are active and rendered on the page to inject all styles related to that component automatically, which increases the speed of loading your application.
Maintenance: As with other CSS-in-JS solutions, you can maintain your CSS codebase easily and track styles affecting your component without having to check through multiple CSS files.
CSS Deletion: Deleting CSS styles is easier, styled-components make it clear which component not being used, and deleting such components automatically deletes all styles related to that component.
Styletron has some outstanding features that will be examined shortly, but the distinct feature that sets Styletron apart from other CSS-in-JS solutions is the ability to use media queries and other CSS selectors which can’t be done via inline styles.
Here are some more benefits of using Styletron:
Performance: To ensure high performance, Styletron follows the critical rendering concept by generating styles when needed by the demanding components. With this, browsers only load CSS rules currently in use rather than processing all CSS rules in one go.
Styletron provides the distinct advantages listed above when used, plus the same advantages to other CSS-in-JS solutions will also apply to it. You can get started with Styletron here.
Emotion took into consideration approaches taken by other CSS-in-JS solutions like styled-components and glamor, so you enjoy similar benefits. Using String and Object styles solve the problem of CSS specificity.
- Material UI
Material UI is a React component that aims to ensure fast and easy web application development. Material UI is not only restricted to Material UI components, but can also use the CSS-in-JS solution through the @material-ui/styles package here.
Material UI used LESS and Inline CSS to style components, but that has been changed in order to take full advantage of CSS-in-JS. Material UI also has similar advantages to styled-components.
In favor of performance, Material UI uses JSS as its core, which ensures speedy compilation from JS to CSS both at runtime and server-side. Material UI is small, occupying just 15kb gzipped space. Follow this guide to get started.
CSS-in-JS changes the perspective of web application development from specificity to modularity. With a list of modern CSS-in-JS solutions with links to get you started, you can now take advantage of the power of web components combined with CSS-in-JS.
Peer Review Contributions by: Louise Findlay
About the authorAransiola Ayodele
Aransiola Ayodele Leom is an Undergraduate student at Federal Polytechnic Bida, Niger State, Nigeria. He has passion for Frontend Development and technical writing. He is passionate and enthusiastic about Data Science and also EdTech. He spends most of his time either learning a new skill or teaching others what he loves doing best. He is currently the Developer Student Club Lead of his campus and other technical communities.