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 options for styling React applications than traditional web applications. more 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 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. style.css 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 , , , , etc., as well, React doesn’t limit you in any way. SASS LESS Bootstrap Semantic UI 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: <p style={{color: "red"}}>Hello World</p> 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 , and . pseudo selectors animations 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 option, however the difference here is that with CSS modules the styles are which means that unlike they . “Standard CSS” scoped locally “Standard CSS” 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 which require you to manually create and type out long class or id names. BEM How to use within React: Use inside of your webpack.config with modules property set to true, or download a complete library such as , once setup use as follows: css-loader css-modules 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? CSS Modules work by taking your CSS files and running them through a which does two things: CSS Module compiler modifies the class and/or id names inside of your CSS files to make them unique produces a JS file containing the mapping between the newly generated names and the old names Hence why you can use named imports with CSS modules — you are not actually importing your CSS, but rather the JS that was produced by the CSS Module compiler. CSS-in-JS As the name suggests with CSS-in-JS you write your CSS inside of JavaScript files rather than CSS files, how you write and apply them, however, is very dependant on the specific CSS-in-JS library that you use. Behind the scenes CSS-in-JS is usually implemented in one of the following three ways : (or a combination of) via inline styles via a <style> element via a <link> element at build time by extracting styles into a CSS file For the sake of not making the article overly long, we will only look at a single CSS-in-JS implementation, that is , which also happens to be one of the most popular implementations out there. styled-components Before we break down how it works however, let’s first look at an example: import React, { Component } from "react"; import styled from "styled-components"; const Wrapper = styled.div` max-width: 600px; margin: 0 auto; `; class HelloWorld extends Component { render() { return ( <Wrapper> <p>Hello World</p> </Wrapper> ); } } Let’s now break this example down. At the top we declare a variable called Wrapper and ask to create and give us back a div consisting of the styles that we have defined within the backticks — in this case we are asking it for a div component with the following stylesmax-width: 600px; margin: 0 auto;. styled-components component We then add this Wrapper component inside of our render method and use it like a regular div. In simple terms all that is going on here is you tell styled-components what kind of a built-in component you want and how it should be styled and styled-components give you that component back. How do the styles get applied behind the scenes? Styled-components rely on the<style> element, so internally you can think of it like creating and appending<style> </style> to the documents head section. Also since it provides local style scoping, it takes care of generating and applying unique class names. your styles To better visualise this, let’s run the above code snippet and see what it produces after being added to the DOM: ... <head> ... <style> /* sc-component-id: sc-bdVaJa */ .sc-bdVaJa {} .brPdfu { max-width: 600px; margin: 0 auto; } </style> </head> <body> <div id="app"> <div class="sc-bdVaJa brPdfu"> <p>Hello World</p> </div> </div> </body> ... As you can see it does look like what we expected it to look like. The only surprise is the extra empty style declaration .sc-bdVaJa {}which based on the comment right above it/* sc-component-id: sc-bdVaJa */seems to suggest that styled-components keep track of which component the styles belong to — presumably for some sort of internal performance optimisation or something along those lines. If you like what you see, you might also want to checkout another, very similar, CSS-in-JS library called , it is very similar to but gives you the option of extracting all of your styles into a CSS file, at build time, which then get linked into the document via the <link> element. Why is this useful? Because the generated stylesheet can be cached by the browser. Emotion styled-components For a full list of the most popular CSS-in-JS solutions see this repository. github Finish line Congratulations for getting to the end :), thanks for reading and hope you learned something of use. Twitter: . linasmnew
