Best Practices for Styling React Components
Introduction
In any React app, components are the basic building blocks of that application. Styling these components is also critical because the client is going to interact with the app and needs to have a good overall experience in terms of look and feel.
There are different ways of styling our components, each having its own advantages and disadvantages.
We'll look at the various options options we have, as well as some of the best practices related to the same.
Inline CSS
We can add inline CSS, which are specified as attributes and are passed to the elements. These are specified as an object with a key as camelCased style name & value being the actual style value (and not as a string).
Below is an example of the same:
1const myStyle = {
2 color: '#ffffff',
3 backgroundColor: '#000000',
4};
5function MyFirstComponent() {
6 return <div style={myStyle}>My First React Component!</div>;This would get rendered by the browser as below:
1<div style="color: #ffffff; backgrond-color: #000000;">My First React Component!</div>CSS in JS
In this approach, we add a style element to the overall DOM, instead of attaching properties to the DOM node (as is done with the first approach, i.e. Inline styles).
Below is an example of the same:
1import styled from 'styled-components';
2
3const MyTitle = styled.div`
4 color: blue,
5 background: yellow
6`
7
8<MyTitle>My First CSS-in-JS React component!</MyTitle>This would get rendered by the browser as below:
1<style>
2.hash999s99 {
3 background-color: black;
4 color: white;
5}
6</style>
7<div class="hash999s99">My First CSS-in-JS React component!</div>These are actually styled components and seem to be one of the best practices, as they only impact the specific component where they get rendered and do not affect any other place in the app.
Using styled components can be a very nice way of organizing our React components. We do not have to make our JSX code dirty with lots of div/span elements. We can simply render the components with their own styles. Also, since this approach would not have any inline styles, our code becomes easy to read. And, more importantly, we can make changes to our CSS anytime, without worrying about if it would have an impact on any other component.
CSS Modules
CSS Modules can be very useful to scope of CSS class names locally. Below is an example of how the same. We'll define two files:
- MyBtnComponent.css - This is our CSS module where we'll just define our normal CSS code.
- MyBtnComponent.js - This is our React Component which would render the button that'll use our CSS class defined above.
1/*MyBtnComponent.css*/
2
3.btn {
4 color: #ffffff;
5 padding: 0.5rem;
6 margin-top: 0.5rem;
7 border-radius: 4px;
8 background-color: #000000;
9}1/*MyBtnComponent.js*/
2import React from 'react';
3import styles from './MyBtnComponent.css';
4
5class MyBtnComponent extends React.Component {
6 render() {
7 return (
8 <button className={styles.btn}>
9 Click for CSS Modules !
10 </button>
11 );
12
13}
14export default MyBtnComponent;The generated CSS would look like below:
1.MyBtnComponent_btn_1EEOu {
2 color: #ffffff;
3 padding: 0.5rem;
4 margin-top: 0.5rem;
5 border-radius: 4px;
6 background-color: #000000;
7}Essentially, in the CSS module approach, we have a normal CSS file with basic/local CSS class names which go through a CSS Modules Compiler and we get an altered CSS version with renamed CSS class names.
Thus, "btn" is the local class name and the same gets converted to a global class name: "MyBtnComponent_btn_1EEOu".
All one needs to do is define the .btn{} inside the CSS module and refer this using styles.btn inside the component.
Conclusion
If we look at the pros and cons of the various approaches discussed, it seems like styling components within the components itself would be one of the best practices that can be followed. The right approach, though, can vary depending on your app specific needs.