The most common way to write CSS for React Components for Companies?

HTML-CSS
1

Hello,

I’m taking a React course and currently, I’m learning how to style React Components with CSS.

The lesson mentions multiple ways to write CSS in Components (there might be more that weren’t discussed)

  1. Vanilla JavaScript
  2. Inline Styles
  3. CSS Modules
  4. Styled Components
  5. Preprocessor (Sass)
  6. Utility Classes (Tailwind)
  7. CSS Framework (Bootstrap)

The instructor mentioned that the CSS method mostly depends on the project you want to build and there isn’t a best way to write CSS

I want to practice making projects as if I professional developer working for a company and write CSS the same way. I was wondering what’s the most common way that companies add CSS to their CSS Components.

I understand that different companies might have different policies on structuring code, but I want to hear your guys’ experiences while working on a company’s codebase.

2

I think you might be looking for best practices and guidelines.

Look for Documentation.
I often find nuggets of best practices as well as known security issues in documentation.

For example:
This page has a mention to accessibility when using links.

3

In my experience, the most common approaches to styling React components in professional settings are CSS Modules, Styled Components, and CSS Preprocessors like Sass.

CSS Modules provide a way to scope CSS locally to individual components, preventing style conflicts and promoting modularity. This approach is widely used because it integrates seamlessly with the component-based architecture of React.

Styled Components offer a more JavaScript-centric approach to styling, allowing you to write CSS directly within your component files using tagged template literals. This approach can lead to more maintainable code and better component encapsulation.

CSS Preprocessors like Sass are also commonly used in professional settings due to their ability to enhance CSS with features like variables, mixins, and nesting, which can help streamline styling workflows and promote code reusability.

Ultimately, the best approach depends on the specific needs and preferences of your team and project. Some companies may prefer one method over others based on factors such as team familiarity, project requirements, and scalability. It’s essential to consider these factors and choose the approach that best fits your project’s needs while also aligning with your team’s expertise and workflow.

1 Like
4

Hello!

Check this out, becoming very popular in the industry right now:

Best thing about shadcn ui: It’s not another library you have to install.

You are setting up a basic configuration and you are ready to go. Now you can copy and paste the code you need into your projects. Uses Tailwind and is fully costumizable.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.