Yesterday, I saw the discussion about CSS BEM and CSSmodule in the group, which aroused my curiosity. I would like to introduce CSS BEM/CSS Module/scoped to more people and explain what they are doing in the code.

For convenience, I mainly use Vue as an example for the Scoped and CSS Module content, because the PROJECT created by the Vue CLI supports both cases by default.

Why are there so many nouns

The first thing we need to understand is that the impact of CSS is global.

But most of the time we prefer it to be local, so there are several solutions above, and here is a detailed explanation.

CSS BEM

For more information: github.com/Tencent/tmt… [Specification] CSS BEM Writing Specification

<style>ModuleName -elementName--modify {}. Paging -button--prev {}. Paging -button--next {}.</style>
Copy the code

As shown above, CSS BEM (block-element-modify) is a conventional way of naming module-tag-modifiers in CSS.

For example: In paging components (/ app/components/paging vue), the module name is the paging, modules of every element within the class name must be in the module name, back button corresponding element names or content (to yourself a suitable name for the button, Finally, his class is paging-button–prev.

Advantages:

1. A local CSS style implementation scheme; 2. It is clear which component the style comes from; 3. The CSS is flat and easy to overwrite and modify. 4. It can avoid rendering errors caused by duplicate child element names as much as possible;Copy the code

Disadvantages:

1. It is troublesome to code, and will cause the code volume to increase, each class increases the length;Copy the code

Scoped

The scoped we see is usually used as follows:

<template> <button class="Button" /> </template>

<style scoped>
  .button { color: red; }
</style>
Copy the code

The final rendering actually looks like this:

<style>
  .button[data-v-f61kqi1] { color: red; }
</style>

<button class="button" data-v-f61kqi1></button>
Copy the code

Scoped actually adds a data attribute to each tag. Each style in scoped is rendered based on the data attribute of the tag.

Through the scoped

Scene reference articles: www.cnblogs.com/iamsmiling/… Scope Style Penetration in Vue (Reprint)

But there are some scenarios where scoped is not enough.

For example, if we have nested a component from a third party, and we find that the class of the component needs to be modified on CSS is A, scoped specifies that we cannot modify the class, we need to penetrate scoped. This can be done using the >>> connector (or /deep/).

<style scoped>Outer >>> Third party components {style} For example,.container >>> .a {
    	color: 'red'
    }
</style>
Copy the code

Advantages:

1. A local CSS style implementation scheme; 2. Easy to use; 3. The CSS is flat and easy to overwrite and modify.Copy the code

Disadvantages:

1. If a parent component and a child component have a class of the same name, the parent component's style is leaked to the child component;Copy the code

CSS Module

How to open the CSS in vue project Module, please click website: vue-loader.vuejs.org/zh/guide/cs…

Reference article: juejin.cn/post/684490… Vue: Scoped style vs. CSS Module

More Module CSS skills, please refer to: www.ruanyifeng.com/blog/2016/0… How to Use CSS Modules

I have never used CSS Module before, but after this understanding, I am looking forward to using it in the project. Its usage is as follows:

<style module>
  .button { color: red }
</style>
Copy the code

At first glance, his use in Vue is almost indistinguishable from Scoped, but it is very different.

  1. The CSS Module generates the following CSS, which is similar to the BEM specification.
<style>
  .ComponentName__button__2Kxy {
    color: red;
  }
</style>
Copy the code
  1. It differs from Scope in that the page references to class need to pass$styleTo obtain;
<template>
  <button :class="$style.button" />
</template>

<style module>
  .button {
    color: red
  }
</style>
Copy the code

The following code is generated:

<style>
  .ComponentName__button__2Kxy {
    color: red;
  }
</style>

<button class="ComponentName__button__2Kxy"></button> 
Copy the code

This may seem like a hassle at first, but the great thing is that you can define your color variables in CSS and export them for use in your components, so you don’t have to declare them again in your components!

<template>
  <div>{{ $style.primaryColor }}</div> <! -- #B4DC47 -->
</template>

<style module lang="scss">
  $primary-color: #B4DC47;
  
  :export {
    primaryColor: $primary-color
  }
</style>
Copy the code

Modifying third-party Components

CSS Modules allow you to declare a global rule using the :global(.className) syntax. Any class declared like this will not be compiled to a hash string.

Other articles reference: blog.csdn.net/mfwscq/arti… Modules How to change the antD component’s default style, change antD’s style

If you want to modify global third-party styles:

:global{ .ant-modal-content{ background-color: transparent; }}Copy the code

If you only want to modify the specified third-party style, add a new class to the module and modify it:

<Modal className="tableBottomPop"></Modal>

:global{ .tableBottomPop{ .ant-modal-content{ background-color: transparent; }}}Copy the code

Advantages:

1. It does not need to write BEM, but generates a class style similar to the BEM specification without adding extra weight to CSS; 2. You can clearly know which component the style comes from, and can explicitly distinguish whether the style is from the component itself or inherits from the parent component; 3. You can reuse variables defined in the CSS.Copy the code

Disadvantages:

$style = "$style"; $style = "$style";Copy the code

conclusion

The above three are all implementations of CSS local styles, there is not much right or wrong, we can choose according to their own use scenarios.

Choose a certain scheme, we remember his “advantages and disadvantages”, use good to avoid bad as far as possible, in fact, there are not so many big problems “scary”, can always find a way to solve.