As the size of the code grows, CSS management becomes a problem in front-end projects, one of which is CSS rule conflicts. Naming conventions are sometimes unavoidable for collaborative projects. Different front-end frameworks have different solutions to this. Vue.js provides a style scoping (Scoped) mechanism to prevent style rule conflicts between components.

Scoped scope

Scoped principle: After adding the scoped property, you will see that every DOM element in the component template has a data-V-xxx property, and CSS rules have property selectors. These attribute names are the unique IDS of the components, which are different from each other. With CSS property selectors, style rules are applied only to the corresponding components, preventing interference with each other.

* Examples:

<style lang="scss" scoped>
.massif-table{
    .top-date{
        background:red;
    }
}
</style>
Copy the code

“How it works:” When we open the console and grab the corresponding DOM element, on the right, we’ll see that our “style selector” ** becomes

.massif-table .top-date[data-v-127071c6]{
    background:red;
}
Copy the code

** “selector” ** Adds a unique hash code ** “data-V-127071C6” ** at the end of the hierarchy to accomplish this by limiting the style to only apply to reshuffles.

That’s why you can’t style a child component that also has scoped inside the scoped component, because the child and parent have “inconsistent hash codes” and the selector doesn’t match, so the style doesn’t work.

* Consider this: components only add the attribute data-v-xxx to elements in their templates, not to elements in child components. At the same time, the generated CSS property selector is only applied to its own DOM element and cannot be applied to elements within a child component.

Deep promotion scope

Deep works by moving attributes in the attribute selector to the upper level so that all child elements can be applied.

The main function of deep is to enhance the CSS style selector scope. Deep is definitely used in conjunction with the “scoped” property, so first we need to look at what scoped does

At this point we need to use “deep” to help us “raise scope”.

* Example Description

<style lang="sass" scoped>
.massif-table{
    .top-date{
       /deep/ .sub-componpent{
             background:red;
        }
    }
}
</style>
Copy the code

Now let’s look at the rendered style again

.massif-table .top-date[data-v-127071c6] .sub-componpent{
    background:red;
}
Copy the code

“Data-v-127071c6” is a hash code directly modified by deep

Error in nested deep

It’s not so much the wrong way to write deep as the wrong way to write deep.

When deep is not well understood and there are multiple nested parent components, it is possible to modify child component styles in the parent component.

.fu{ /deep/ .zi1{ /deep/ .zi2{ /deep/ .zi3{ background:red; }}}}Copy the code

This is a weird way to write it. First, let’s see what the hell happens to this notation.

.fu[data-v-127071c6]  .zi1  /deep/  .zi2  /deep/  .zi3{
     bakcground:red;
}
Copy the code

The problem is that this is not correct by itself, but “browser compatible” is completely unambiguous, so the style will work. The same cannot be said of mobile browsers.

Three greater than (>>>) VS deep

 <style scoped>
    div >>> button {
      background-color: lightblue;
    }
</style>
Copy the code

The three greater-than signs >>> here are the so-called deep selectors. The function of the selector here is to apply style rules to all buttons under the div, even buttons rendered inside child components.

>>> uses the same function as /deep/. The reason for this is that some precompilers, such as SASS, do not recognize the syntax >>> and will fail to compile. In this case, use /deep/ instead.

* conclusion:

Deep selectors are not used very often, but can solve specific problems in specific situations. It is also worth noting that the deep selector applies to all elements in the child component, including nested child elements. Therefore, we need to consider the scope of influence and take appropriate measures.