CSS Naming: BEM, scoped CSS, CSS modules and CSS-in-JS explained

The scope of css is global. As the project gets bigger and bigger and more people come to it, naming becomes a problem. Here are some solutions to the naming problem.

1. BEM

The name is in the form of .block__element--modifier. The name has meaning. Block can be regarded as a module and has a certain scope.

Examples

.dropdown-menu__item--active

2. Scoped CSS

Reference: vue-loader.vuejs.org/zh/guide/sc…

Goal: The current component style will not affect other components

Add a unique attribute to the component's DOM node and convert the CSS in the style tag to match the attribute, making the CSS scope limited

Examples

<style scoped>
.example {
  color: red;
}
</style>
 
<template>
  <div class="example">hi</div>
</template>

Conversion results:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
 
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

3. CSS modules

Reference: vue-loader.vuejs.org/zh/guide/cs…

Convert the CSS selector into a unique string and apply it to the DOM. It is named by algorithm, recording the mapping table from human naming to algorithm naming

Examples

<style module>
.red {
  color: red;
}
</style>
<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

Conversion results:

<style module>
._1yZGjg0pYkMbaHPr4wT6P__1 {
  color: red;
}
</style>
<template>
  <p class="_1yZGjg0pYkMbaHPr4wT6P__1">
    This should be red
  </p>
</template>

4. CSS-in-JS

Reference: github.com/styled-comp…

Express the css content with a unique selector. Same as CSS modules, named using an algorithm. Treat CSS as a string of JS, giving CSS more capabilities

Examples

<template>
  <css-in-js></css-in-js>
</template>
 
<script>
  import styled from 'vue-styled-components';
  export default {
    components:
      cssInJs: styled.div `
                color: red;
            `
    }
  }
</script>

Conversion results:

<template>
    <div class="gXTzCp"></div>
</template>
<style>
.gXTzCp {
    color: red;
}
</style>

V. Conclusion

1. BEM makes naming regular and meaningful. Blocks can be considered as modules and have a certain scope.
2. scoped css limits the scope of CSS, regardless of naming. Unable to adapt to multiple themes
3. CSS modules use algorithmic naming, which eliminates naming conflicts and limits the scope of CSS. Unable to adapt to multiple themes
4. CSS-in-JS uses algorithmic naming and has the advantages of CSS modules. At the same time, css is regarded as a string of js, giving css more capabilities

This is the end of this article about CSS naming: BEM, scoped CSS, CSS modules and CSS-in-JS. For more relevant CSS naming content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!