Why not write the CSS style in the .vue file. I have
seen the code of many vue projects and found that many people like to write the style in the component. Most of the reasons are for convenience and easy maintenance. Many people like to abuse the scoped attribute. The official vue-hackernews-2.0 instance does the same, but I don’t like it too much for the following reasons:
-
The build speed will slow down
. The styles written in the style of the component will first go through the vue-loader and then the less-loader or css-loader, which invisibly increases the compilation time -
After using the scope attribute, the generated js file and css file will normally bloat some
scope attributes. In fact, when the vue-loader is compiled, the corresponding element of the component template and the css style add a random attribute, which will cause the Add a lot of code like data-v-33053b70 to the code, which invisibly makes the packaged file bigger, the more components, the more obvious -
The scope attribute does not work
for elements that do not exist in the current component. The reason is the same as the above. This situation is often encountered when the component library is used, but the style of the component library needs to be modified. -
After using the scope attribute, the css parsing efficiency will become lower. In
css, the efficiency of the attribute selector is the lowest, especially when the element selector is used directly
Personal solution:
Unified management of styles, never write styles everywhere
As in the screenshot above, the style.less file is the entry file, responsible for importing other various sub-style files, and finally introduced by the App.vue root component. All files in the home folder starting with an underscore are the styles of each component,
such as some less configuration , Can be placed in the _base.less file, the layout style can be placed in the _layout.less file, and the other routing components are a file, and with the split screen function of the current editing, the related files can also be quickly located. Even some editors can jump directly from the template to the corresponding style file
In fact, the above is all nonsense. I just don’t want to write the style in the component. If you think this method is good, you can learn from and improve it. If you still think it’s good to write in the component, you can continue to write it in the component.