How does CSS fit into React?
Originally published by Linas M on February 14th 2018 There are a lot of different ways in which you can write CSS for your React applications, I would go as far as to say that you actually have more options for styling React applications than traditional web applications. Let’s define some of these options: Standard CSS Inline Styles CSS Modules CSS-in-JS Now let’s take a closer look at each one of these. Standard CSS This is the traditional and the most common way of writing CSS. You create a style.css file, add all of your styles inside of it, then import the stylesheet and reference the styles within your JSX via className or id attributes. Note that you don’t have to limit your styles within a single stylesheet, you can just as well split them into multiple files and place them next to the components which they are supposed to target. Also note that you can keep on using your everyday CSS libraries and frameworks such as SASS, LESS, Bootstrap, Semantic UI, etc., as well, React doesn’t limit you in any way. Inline Styles Inline styles refer to writing CSS directly inside of HTML markup via the style attribute. In React, using JSX, this looks like this: Hello World Inline styles are probably the most limited approach in terms of styling full blown applications since they cannot make use of all of the CSS features such as pseudo selectors, animations and media queries. In practise they are mostly used for basic style modifications such as color toggling based on a condition, but I have also heard of people and even companies using this as their sole styling mechanism. (Be aware that, arguably, inline styles can also be considered as part of CSS-in-JS, because technically you do write them inside of JS files with React. The reason I chose to put them into their own category was because CSS-in-JS libraries are typically more complex than just writing styles inside of a style attribute — they instead introduce some sort of a higher level abstraction as you will see in the CSS-in-JS section.) CSS Modules With CSS modules you create a CSS file for every type of component that you want to style the same way that you might do with the “Standard CSS” option, however the difference here is that with CSS modules the styles are scoped locally which means that unlike “Standard CSS” they don’t leak into other components. The styles being locally scoped also means that you can forget about implementing your own local scoping strategies or following methodologies such as BEM which require you to manually create and type out long class or id names. How to use within React: Use css-loader inside of your webpack.config with modules property set to true, or download a complete library such as css-modules, once setup use as follows: create a CSS file for whatever components you want to style write your CSS import this CSS file inside of the target components reference these styles within your components via their className and id attributes How are CSS Modules implemented behind the scenes? » Read More
Like to keep reading?
This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.