When you start your React project, you will be slightly confused about styling the app structure.
There are several ways to style React components, but the main question is how to choose the right method for styling your component.
Let’s deep with some methods and specify it’s pros and cons to facilitate the selection for you 💁
Factors you should care about while picking styling architecture:
- It should serve your particular use case
- Personal preferences, it is not a shame multiple ways have the same pros and cons so the decision may back to your preferences
- Architectural goals of the way you work aligned with your team
Styling Strategies In React:
- CSS and SASS stylesheets
- CSS Modules
- CSS in JS
Note: each strategy has multiple ways to handle so we will present some of them in detail
CSS and SASS stylesheets:
CSS or SASS Stylesheets is a styling strategy that involves the use of external CSS or SASS stylesheets that can be imported into your React components, it will mount when component mount then becomes general never unmount until you refresh the app.
Pros:
- It is much more popular than the rest of the styling strategies.
- easy for the browser to optimize
- CSS and SASS is universal and has no opinion on how you render your UI making it a great choice for teams that have legacy CSS and are migrating over to a new framework
- High Readability
Cons:
- If not properly structured, a CSS or SASS stylesheet can become long and difficult to navigate through as the application becomes complex.
- If you are not following a well-structured methodology and use the same classes in your different components it will conflict with each other, and because of the hell of the “!important” keyword, your stylesheet would be a nightmare!
If you made your decision to use this method here is some methodologies you could follow to avoid this disadvantages
CSS Methodologies:
- BEM [Block — Element — Modifier]
BEM encourages developers to divide layouts into blocks and nested elements, the appearance of a block or element should also be identified and applied using modifiers.
- Let’s have a deep look at the example above, almost all systems have a list so the list will be our BLOCK which has a class with “list-block”
- each
<li>or each child of the list will be a list item that has a class that starts with the block name followed by double underscore “” then item-specific class “list-blockitem” - Now we finished the basic list if we have something that should change from the behavior of the list this called modifier start with the block name as well followed by double dashes “list-block — inline” or element class if the modifier for the element itself.
There are different ways for BEM naming conventions on their website.
2. ACSS [Atomic CSS]:
ACSS relies on Atomizer to dynamically generate an Atomic stylesheet from the ACSS classes you’re using in your project
This method depends on creating dynamic classes each class has one thing to do and could be reusable in the whole project combined to achieve the final theme/layout — with multiple naming conventions so I suggest having a look at all of them first then pick your preferable way
3. SMACSS [Scalable and Modular Architecture for CSS]
SMACSS works by dividing CSS into five categories — base, layout, module, state, and theme
Base styles override the default styles and are mainly applied using element selectors it is like your app skeleton style in another word commonly called reset.
Layout styles are for major objects like headers and sidebars. They are applied using IDs or classes with generic helper declarations optionally prefixed with “l-classname”.
Module styles are for smaller, reusable objects like buttons and lists, each commonly with its file.
State styles are for changeable states, like hidden or disabled. With is or has a prefix
Theme styles are optionally used for changing the visual scheme.
CSS Modules:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. When using CSS Modules, each React component is provided with its CSS file, which is scoped to that file and component alone.
Pros:
- Modular and reusable CSS
- Local scope
- The beauty of CSS modules happens at build time when the local class names which can be super simple without conflict are mapped directly to the automatically generated ones
Cons:
- When a Reference is made to an undefined CSS Module, it resolves to undefine without a warning — could be handle with classNames package -
- Only allows usage of camelCase CSS class names.
Usage:
If your React app is created by create-react-app so no need for extra work to go with the CSS module as it is supported already if not you need to add a task to your webpack to compile module files.
You will import your style sheet as an object and deal with it totally as a normal Javascript object and read properties from it, and for the “style.module.scss” you could write a normal sass code that you used.
Hint: if you want to apply general style for a specific class outside the modularization behavior in the module file you could use (: global) keyword to do it
CSS in JS:
CSS-in-JS is a technique that enables you to use JavaScript to style components. When this JavaScript is parsed, CSS is generated (usually as an <style> element) and attached to the DOM.
Pros:
- Dynamic Theming
- Style Sheets are created when a component mounts and are removed when it’s unmounted.
- Function values and rules are updated automatically with any data you pass to useStyles(data). You can pass props, state, or anything from context for example.
Cons:
- Putting a CSS-in-JS library into use adds an extra layer to your React application
- You have to learn a different way of styling
- Custom or Automatically generated selectors can be very difficult to read especially when using your browser dev tools to debug.
we’ll be looking at some of the popular CSS-in-JS libraries
It uses tagged template literals to style your components. It removes the mapping between components and styles, making it easier to achieve low-level styling.
As you see in the example above CSS in js gives us the power to render the style conditionally and could be changed depending on a specific prop directly.
After defining your style you could simply use the created constant as a component
It provides the familiar JavaScript syntax for styling components and creating dynamic themes. By letting users provide dynamic props for styling, has an edge over some of the other libraries in this list.
It is the same logic as styled-components and most of the CSS in js libraries are just small differences in syntax but overall the big deal here is the power in handling component styles with the props.
Conclusion:
Each of these methods has its advantages and disadvantages, and it all depends on your personal/company/team preferences and the complexity of your application.
Also, whatever styling strategy you may decide to use, it is still basically CSS
You can write CSS as you’ve always done, but React and other libraries offer solutions that can also help with styling.
References:
- https://www.hongkiat.com/blog/css-writing-methodologies/
- https://www.creativebloq.com/features/a-web-designers-guide-to-css-methodologies#section-oocss
- https://www.smashingmagazine.com/2020/05/styling-components-react/
- https://www.sitepoint.com/react-components-styling-options/
- https://www.telerik.com/blogs/overview-of-popular-css-in-js-libraries-for-react
Slides about CSS methodologies:
- https://docs.google.com/presentation/d/1e-TCtpK-BYar2s2LI9k-X3e5865q407DMqPfCC02r_4/edit?usp=sharing
Thank you for reading, if you have any comments let me know, please :)
That’s all for today see you soon in my next story …👋
Top comments (0)