As the modern applications are more and more complex and dynamic, the ways of styling the page has developed as well. From simple CSS we went to more sophisticated tools. Let's have a look on how the ways of styling web applications developed over the yers
Preprocessors like Sass and less are an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, mixins, conditions, nesting and extends. Unfortunately it didn’t save us from one !important problem. The issue of rewriting existing rules still remained. So, we had to came up with naming conventions like BEM.
BEM (Block — Element — Modifier) is a way of naming classes so all classes are unique, which eliminates the issue of overriding the rules.
Standalone entity that is meaningful on its own (.panel, .container, .form)
A part of a block that has no standalone meaning and is semantically tied to its block (.panel__header, .container__title, .form__input)
A flag on a block or element. Use them to change styles or behavior (.input — highlighted, .input — disabled)
Besides that, BEM is a bit more than just a naming convention. It leads us to think about the elements as a separate components, from which we are building our application. Why is that cool?
BEM methodology gives your CSS code a solid structure that remains simple and easy to understand
Avoiding descendant selector
The descendant selector is very costly, as the browser must check for a match with every descendant element. On a complex web page, this can result in thousands and thousands (perhaps even more) of descendant selector searches. It is so expensive because the relationship isn’t restricted to parent and child.
Block styles are never dependent on other elements on a page, so you will never experience problems from cascading. You also get the ability to transfer blocks from your finished projects to new ones
Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain. With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.
CSS Modules is not an official spec or an implementation in the browser but rather a process in a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped (i.e. kinda like namespaced). Which pretty much means, that the classes we define exists only in one component, so we don’t have to worry about unique naming. We can also simply combine them with css preprocessors like less or sass.
Our generated HTML might look like this:
And our generated CSS might look like this:
Apart from the improved experience for developers, styled-components provides:
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.
styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
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.
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.
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.
write your CSS to the current standard and let styled-components handle the rest.
You get all of these benefits while still writing the CSS you know and love, just bound to individual components.
We can simply style base HTML elements
Or our whole custom React component