React Styling - TwoGears/hakomo-guides GitHub Wiki

1. Inline CSS - as React Native

2. CSS in JS - These are actually styled components and seem to be one of the best practices, as they only impact the specific component where they get rendered and do not affect any other place in the app. Using styled components can be a very nice way of organizing our React components. We do not have to make our JSX code dirty with lots of div/span elements. We can simply render the components with their own styles. Also, since this approach would not have any inline styles, our code becomes easy to read. And, more importantly, we can make changes to our CSS anytime, without worrying about if it would have an impact on any other component.

3. CSS Modules - Essentially, in the CSS module approach, we have a normal CSS file with basic/local CSS class names which go through a CSS Modules Compiler and we get an altered CSS version with renamed CSS class names. Images Link

There are tons and tons of ways to use styling in React, but one way that looks to be the best practice is to make components within your component to style directly. These styled components affect only that specific component in which they are rendered, and nothing else. Components in React work the best when they are small, focused, and reusable. Image link

• CSS-in-JS is a styling technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style> element) and attached into the DOM. It allows you to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way.

• Thinking in components. No longer do you have to maintain a bunch of stylesheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
• Dynamic Functionality - As CSS-in-JS is essentially JavaScript code, you can apply complex logic to your style rules, such as loops, conditionals, variables, state-based styling, and more. Therefore, it’s an ideal solution if you need to create a complicated UI that requires dynamic functionality.
• Local Scoping - By default, CSS doesn’t allow local scoping. Each style rule has a global scope, so it applies to the entire project. As a result, styles can override each other in surprising ways. CSS-in-JS libraries take this concept to the next level by automating scoping, which leads to a high level of predictability.
• Scoped selectors. CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications. CSS in JS generates unique class names by default, when it compiles to CSS.
• Vendor prefixing. The CSS rules are automatically vendor prefixed, so you don’t have to think about it.
• Code sharing. Easily share constants and functions between JS and CSS.
• Only the styles which are currently in use on your screen are in the DOM.
• Dead code elimination

1. Learning Curve - CSS-in-JS definitely has a learning curve, especially if you have used neither component-based frameworks nor web components before. Besides learning the new syntax, you also need to pick up a new way of thinking, which needs time and might slow down your development workflow for a while.
2. Extra Layer of Complexity - Putting a CSS-in-JS library into use adds an extra layer to your front-end stack, which can sometimes be unnecessary. Although CSS-in-JS manages complexity excellently, it’s not always worth the hassle, especially in the case of a simpler project.
3. Code Readability - Automatically generated selectors significantly worsen code readability. This can be a huge concern for you if you regularly use your browser’s developer tools for debugging, but also for beginners, as it’s essential for them to understand the code they wrote.

• Info
• Video

1. Styled Components
2. Emotion
3. JSS

“For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. ... I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!” – Max Stoiber

• Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
• Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
• Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
• Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

• The preprocessor we use, stylis, supports scss-like syntax for automatically nesting styles. The ampersand (&) can be used to refer back to the main component.

• Styled-components can be used with React Native in the same way and with the same import.

• Styled-components has full theming support by exporting a wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

CSS-in-JS libraries provide you with a straightforward and secure methodology to style component-based applications. Besides JavaScript frameworks, you can also use them together with Web Components. They can also come in handy if you want to create a complex UX for a monolithic front-end, such as state-based functionality. On the other hand, CSS-in-JS is probably not for you if you are a beginner developer, want to create websites without a dynamic front-end, or appreciate simplicity and code readability. You might reasonably find that your go-to tools such as Sass or PostCSS are perfect for your goals and that you don’t want to pick up a new technology just for the sake of novelty.