前端 - 这样写样式浏览器会选取 DOM 元素两次吗？

Question

.dom0, .dom1 {
    text-align: center;
}

.dom0 {
    color: red;
    font-size: 12px;
}

.dom1 {
    color: blue;
    font-size: 14px;
}

如果少量公用的样式 是不是分别写比较好 虽然这样会造成代码的重复

.dom0 {
    color: red;
    font-size: 12px;
    text-align: center;
}

.dom1 {
    color: blue;
    font-size: 14px;
    text-align: center;
}

Answer 1

The respondent wants to ask about the difference in performance between the two?
In fact, both methods are possible. CSS is not JS. It does not mean that if you write it separately, you will select the DOM twice. CSS is more like this process:

The HTML renderer starts traversing the DOM and finds a p
in front of it. Then, the HTML renderer runs to the style sheet. This p has these classes and ids
The styles that match the selector of this DOM are all recorded~
……

That’s it, until the entire HTML is rendered.

The respondent seems to understand that writing a .dom1 in CSS means that the HTML interpreter will find the HTML elements of class=dom1 and change them all to the styles in {...}. This understanding is wrong of.

So, when writing CSS, some common things can be taken out separately for easy modification and later use. For example:
CSS:

.bold { font-weight:600; }
.yh { font-family: "Microsoft YaHei"; }
.greytext { color: #555; }

HTML:

<p class="bold yh greytext"> 三个样式都有 </p>
<p class="greytext"> 这是灰色字体 </p>

----------2017.03.05 Added----------

Will CSS be appended twice?

Each DOM has all the CSS properties that we can define. We define styles just to change their style properties.
For example: <p>默认样式的p标签</p>
We did not specify its color, but in fact, the color attribute of this p tag is #000 (black).

Then the repeatedly defined style will overwrite the previous definition, for example:
CSS:

.dom0 { color: #222; }
.dom1 { color: #333; }

HTML:

<p class="dom0 dom1">猜猜我是什么颜色</p>

↑ The final color of this p tag will be #333. Because #222 was also recorded, but he was in front and was covered.

If the HTML is as follows, it will also be overwritten:
HTML:

<p class="dom0 dom1" style="color:#444">猜猜我是什么颜色</p>

↑ The color of this p tag will be #444. Because the style definition that comes with the tag has the highest priority. (He is defined behind all style sheets.)

There is a way not to be overridden, that is to add !important. (IE6 and below are not supported)
For details, please refer to http://www.w3chtml.com/css3/r...

CSS:

.dom0 { color: #222 !important; }
.dom1 { color: #333; }

HTML:

<p class="dom0 dom1">猜猜我是什么颜色</p>

↑ This is the color of the p tag is #222. Because !important is added, the styles given later will not cover this one.

Answer 2

Isn’t this your style? What is selecting dom? It should be rendering dom.
You will render it twice. Obviously the first way of writing is better.

Answer 3

Depending on your application scenario, in fact, text-align:center can be extracted separately like bootstrap and used in parallel with multiple classes

In this way, not only the two of them can be used, but other elements can also share this class

.text-center{
    text-align:center;
}
.dom0 {
    color: red;
    font-size: 12px;
}

.dom1 {
    color: blue;
    font-size: 14px;
}

<p class="text-center dom0"></p>    
<p class="text-center dom1"></p>    

Answer 4

（o´・ェ・｀o） It doesn’t matter what style you choose, after all, it will be drawn to the public after packaging~

Answer 5

No matter how you write CSS, the CSS parser will calculate the final style applied to this DOM element according to priority rules before rendering the DOM element
It does not apply styles from top to next

Answer 6

If it is a selector like yours, there is no need to use the first one. Because the extracted ones are completely useless. Cannot be reused.
You can extract reusable functions, for example:

.textCenter:{
    text-align:center;
    display:block;
}
.dom1{
    font-size:12px;
    color:red;
}
.dom2{
    font-size:14px;
    color:blue;
}

<p class="textCenter dom1"></p>
<p class="textCenter dom2"></p>
<p class="textCenter "></p>

Answer 7

Both writing methods are acceptable, but it is recommended to write it in a public style, so that the code is simpler and easier to manage.

Answer 8

Your first way of writing will indeed render the same thing twice. In addition, to achieve the same effect, the less code, the better. You should learn about sass or less.