JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Follow publication

Different Ways to Write CSS in a React App

As a beginner in web development, one of the first things you will hear is that you need to learn CSS fundamentals. CSS is a crucial aspect of building a web application. However, when you start working on real-world projects, you’ll quickly discover that you need more than plain CSS. Fortunately, there are many different ways to write CSS, and in this article, we’ll explore several of them, specifically in the context of using Next.js.

The different approaches we’ll look at have pros and cons, so it’s important to understand each to decide what’s best suited for your project.

Approach 1:

To begin with, the most basic way to style a Next.js app is to create a global CSS file that applies to the entire application. This approach might work well for small projects, but it doesn’t work well for large projects. One of the main issues is that the nomenclature of classes becomes a real challenge because CSS cascades. As your project grows, you’ll need to come up with a naming convention like BEM (Block Element Modifier) to avoid naming collisions. But soon you’ll end up using the !important tag everywhere. Additionally, global CSS files lead to very large and inefficient CSS bundles, which slow down app loading times.

Approach 2: CSS Modules

To address concerns mentioned above, Next.js supports a tool called CSS modules. With CSS modules, you can write individual module files that define styles scoped to a particular component. This way, you don’t have to worry about name collisions, and you can have two different modules that define the same class name without interfering with each other. Furthermore, CSS modules tell Next.js which CSS to load for a particular page, which can help to reduce the size of your CSS bundle.

However, while CSS modules make your life much easier, they lack programmatic features like loops, functions, mixins, etc. To add these features, you can use a CSS preprocessor like Sass, Less, or Stylus. Next.js supports Sass out of the box, and you can use variables, mixins, and functions to make your code more concise and efficient.

Approach 3: JavaScript to write CSS code.

Another approach is to use JavaScript to write CSS code. This technique has become increasingly popular in recent years. With JavaScript libraries like Styled Components, Emotion, and Styletron, developers can write CSS code directly in their JavaScript files. This approach allows you to write CSS more programmatically, and it gives you the full power of JavaScript at your fingertips. Additionally, you can create dynamic styles based on the state of your application, making it easy to create responsive designs.

In Next.js, there’s a built-in solution called style-jsx. You can write CSS code directly in the component using the JSX attribute. This allows you to interpolate values directly into the style, so you can dynamically change the styles based on state changes. Additionally, these styles are scoped to the component, which means they won’t affect other styles in your application.

CSS in JS using style jsx attribute | dazzler kumar | deepak kumar
Source: NextJS Docs

Approach 4: Utility class libraries

The next approach is to use a utility class library like Tailwind or Bootstrap. These libraries provide a large collection of pre-built utility classes that you can use to rapidly build out a good-looking UI. With these libraries, you can style your components with utility classes instead of writing CSS code directly. In addition, Libraries like Tailwind can automatically purge all unused CSS to ensure an efficient bundle size.

However, the utility class approach may not be suitable for everyone. Using utility classes can quickly clutter your component HTML code, making it hard to read and maintain. You will need to learn how to organize your code properly to avoid this issue. Additionally, Tailwind does not provide pre-built components, so you’ll have to build them yourself.

Approach 5: Component libraries

Component libraries are pre-built collections of UI elements that can be used to rapidly build out complex user interfaces. They can be used to provide a solid collection of styles for things like buttons, cards, and other UI elements.

One of the benefits of using component libraries is that you can mix and match different techniques to achieve the best results for your application. By using pre-built components, you can reduce the amount of custom CSS you need to write, which can save you time and effort in the long run.

One thing to keep in mind when using a component library is that they tend to be fairly opinionated. This means that they may not work for everyone, and it’s important to choose one that you really like and that fits your needs. Some component libraries worth checking out are Ant, Material Design, Rebass, Chakra, and Tamagui. Each of these libraries has its strengths and weaknesses, so it’s important to choose the one that best suits your needs.

In conclusion, when it comes to real-world projects, there are many different approaches to writing CSS, each with its own pros and cons. In this article, we explored several approaches such as global CSS files, CSS modules, JavaScript to write CSS code, utility class libraries, and component libraries. Choosing the right approach depends on your project’s requirements, scalability, and personal preferences. By understanding these different approaches, you can choose the one that best suits your needs and create efficient and scalable web applications.

If you’re interested in learning more concepts of frontend web development, consider reading my other pieces of writings. Thanks for reading, and happy coding!

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Join our Discord community and follow us on Twitter, LinkedIn and YouTube.

Learn how to build awareness and adoption for your startup with Circuit.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by Deepak Kumar

Graduate Frontend Engineer at Doorpix | Sometimes Code, Sometimes Write. On a journey to live a better life | https://dazzlerkumar.vercel.app/

No responses yet

Write a response