5 Ways to Style React Using CSS

5 Ways to Style React Using CSS.

Did you know that over 97% of websites use CSS for styling?

Cascading Style Sheets, or CSS, allow developers to create attractive, scannable, and presentable web pages.

The CSS language specifies how documents are presented to the user. A document, in this case, is a file written in a markup language such as XML or HTML.

What is style in React?

The simplicity of building, running, and maintaining a React app is the main reason behind its popularity. React is a JavaScript library rather than a framework, offering more than just pre-written functions and code snippets.

The availability of reusable components, its flexibility, code stability, speed, and performance are some of the reasons why React ranks high among JavaScript frameworks and libraries.

Designing in React is the process of making various components in a React application visually appealing using CSS. However, it’s worth noting that React uses JSX (JavaScript and XML) instead of HTML as its markup language. One of the main differences is that HTML uses .class to label classes, while JSX uses .ClassName to indicate the same thing.

Why should you style React using CSS?

• Make your app responsive. Modern web applications need to be accessible on both small and large screens. CSS allows you to apply media queries to your React app and make it responsive to different screen sizes.
• Speed ​​up the development process. You can use the same CSS rule in multiple components of your React app.
• Make the React app maintainable. Making appearance changes to specific components/parts of your application is easy using CSS.
• Improved user experience. CSS allows for easy-to-use formatting. A React with text and buttons in logical places is easy to navigate and use.

There are several approaches that developers can use to design their React apps. The following are some of the most common;

write styles online

Inline styles are the easiest approach to designing a React app, since users don’t need to create an external style sheet. CSS styling is applied directly to React code.

It’s worth noting that inline styles have high priority over other styles. So if you had an external style sheet with some formatting, the inline style would override it.

This is a demo of the inline style in a React app.

import React from ‘react’; import ReactDOM from ‘react-dom/client’; const Header = () => { return (

Hello World!!!!!

Add a little style!

); } const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render();

The displayed element will display an h1 with a light blue background.

Advantages of the online style

• Fast. It’s the simplest approach, as you add styling directly to the label you want to style.
• He has great preference. Inline styles override external style sheets. So you can use it to focus on a particular functionality without changing the whole app.
• Awesome for prototyping. You can use inline styles to test functionality before incorporating the formatting into an external style sheet.

Cons of the online style

• It can be tedious. Designing each label directly takes a lot of time.
• Limited. You can’t use CSS features like selectors and animations with inline styles.
• Many inline styles make the JSX code unreadable.

Importing external style sheets

You can write CSS to an external file and import it into your React app. This approach is comparable to importing a CSS file into the tag

of an HTML document.

To accomplish this, you need to create a CSS file in your app directory, import it into your target component, and write style rules for your app.

To demonstrate how external CSS style sheets work, you can create a CSS file and call it App.css. You can then export it as follows.

import { React } from “react”; import “./Components/App.css”; function App() { return (

); } export default App;

The above code snippet imports an external style sheet into the App.js component. The App.css file is located in the Components folder.

Advantages of external CSS style sheets

• reusable. You can use the same CSS rules in different components in a React app.
• It makes the code more presentable. Understanding the code is easy when using external style sheets.
• Gives access to advanced CSS features. You can use pseudo classes and advanced selectors when using external style sheets.

External CSS Style Sheets Scam

• Requires a reliable naming convention to ensure styles don’t override each other.

Use CSS modules

React apps can get really big. CSS animation names and class names have a global scope by default. This setting can be problematic when dealing with large style sheets, as one style can override another.

CSS modules solve this challenge by parsing animation and class names locally. This approach ensures that the class names are only available within the file/component where they are needed. Each class name is given a unique programmatic name, which avoids conflicts.

To implement CSS modules, create a file with .module.css. If you want to name your style sheet as style, the file name will be style.module.css.

Import the created file into your React component and you are ready to go.

Your CSS file could look like this;

/* styles.module.css */ .font { color: #f00; font-size: 30px; }

You can import the CSS Module into your App.js as follows;

import { React } from “react”; import styles from “./styles.module.css”; function App() { return (

Hello SamaGame.com reader

); } export default App;

Advantages of using CSS modules

• Easily integrates with SCSS and CSS
• Avoid class name conflicts

Cons of using CSS modules

• Referencing class names using CSS modules can be confusing for beginners.

Use stylish components

Styled components allow developers to create components using CSS in JavaScript code. A styled component acts like a React component that comes with styles. Styled components offer dynamic styling and unique class names.

To start using Stylish Components, you can install the package in your root folder using this command;

npm install styled-components

The next step is to import styled components into your React app.

The following is a snippet from App.js that uses styled components;

import { React } from “react”; import styled from “styled-components”; function App() { const Wrapper = styled.div` width: 80%; height: 120px; background-color: lightblue; display: block; `; return ; } export default App;

The rendered app will have the old styles imported from Stylish Components.

Advantages of stylish components

• is predictable Styles in this styling approach are nested in individual components.
• You don’t need to focus on the naming conventions of your classes. Just write your styles and the package will take care of the rest.
• You can export styled components as props. Styled components convert regular CSS into React components. So you can reuse this code, extend styles through props, and export.

Cons of Stylish Components

• You must install a third-party library to get started.

Syntactically Awesome Style Sheets (SASS/SCSS)

SASS comes with more powerful tools and features that are missing from regular CSS. You can write styles in two different styles guided by these extensions; .scss and .sass.

SASS syntax is similar to regular CSS. However, you don’t need the opening and closing square brackets when writing style rules in SASS.

A simple SASS snippet will appear as follows;

nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav

To start using SASS in your React application, you must first compile SASS into plain CSS. After configuring your app via the Create React App command, you can install node-sass to take care of the build.

npm install node-sass

You can then create your files and give them .scss or .sass extensions. You can then import your files as normal. For example;

import “./Components/App.sass”;

Advantages of SASS/SCSS

• It comes with many dynamic features like mixins, nesting, and extension.
• You don’t need much boilerplate to write CSS code when using SASS/SCSS

Cons of SASS/SCSS

• Styles are global and therefore you may run into overriding issues.

What is the best styling approach?

Since we have discussed five approaches, you want to know which one is the best. It is difficult to single out the absolute winner in this discussion. However, these considerations will help you make an informed decision:

• performance metrics
• If you need a design system
• The ease of optimizing your code

The inline style is suitable when you have a simple application with few lines of code. However, everyone else; external, SASS, Styled Components and CSS Modules, are suitable for large applications.

What are the best practices for maintaining CSS in a large React app?

• Avoid the online style. Writing inline CSS styles for each tag in a large React app can be exhausting. Instead, use an external style sheet that suits your needs.
• Line your code. Linters like Stylelint will highlight styling errors in your code so you can fix them sooner.
• Perform regular code reviews. Writing CSS sounds like fun, but regular code reviews make it easy to catch bugs early.
• Automate testing on your CSS files. Enzyme and Jest are awesome tools you can use to automate tests on your CSS code.
• Keep your code DRY. When working with commonly used styles, such as colors and margins, use variables and utility classes based on the Don’t Repeat (DRY) principle.
• Use naming conventions such as Block Element Modifier. Such an approach makes it easy to write CSS classes that are easy to understand and reuse.

Conclusion

Above are some of the shapes you can use to style React. The choice of style approach will depend on your needs, abilities and taste. You can even combine multiple styling approaches, such as inline and external style sheets, in your React app.

You can also explore some of the best CSS frameworks and libraries for front-end developers.