Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to resolve CSS style conflicts". The editor shows you the operation process through actual cases. The operation method is simple and fast, and it is practical. I hope this article "how to resolve CSS style conflicts" can help you solve the problem.

Style conflict resolution

Scoped CSS and CSS Module are two effective methods to solve the modularization defects in CSS, in which CSS Module ensures uniqueness by transcoding class names, thus avoiding style conflicts, such as

Hello World

Be converted to

Hello World

And correspondingly

.title {

Color: red

}

Be converted to

. _ 3zyde4l1yATCOkgn-DBWEL {

Color: red

}

Because the possibility of the same name after the conversion is too small, it ensures that various style names can be safely used in the development phase, even if the same name does not cause conflict.

Scoped CSS uses a different solution-- making an article on the HTML tag, such as

.example {

Color: red

}

Hi

Be converted to

.example [data-v-f3f3eg9] {

Color: red

}

Hi

In this way, the style of example is limited to HTML tags with data-v-f3f3eg9 attributes, which indirectly ensures uniqueness and avoids conflicts.

It was fine here, but the next paragraph in the official document puzzled me.

After using scoped, the style of the parent component will not infiltrate the child component. However, the root node of a child component is affected by both the scoped CSS of its parent component and the scoped CSS of the child component. This is designed so that the parent component can adjust the style of its child component root element from a layout point of view.

It seems that we still have to do an experiment.

Prepare for

Prepare three components

Level1.vue

Level2.vue

Level3.vue

Where Level1.vue contains Level2.vue,Level2.vue and Level3.vue.

Then add some styles that are easy to distinguish.

This is the end of the introduction to "how to resolve CSS style conflicts". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.