前端 - 这样写样式浏览器会选取 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

答主是想问两者在性能上的区别吧？
其实两种方式都可以，CSS不是JS，不是说分开写就会去选择DOM两次，CSS更像是这样的过程：

HTML渲染器开始遍历DOM，发现前方有一个p
然后，HTML渲染器跑去样式表，这个p有这些class和id
符合这个DOM的选择器的样式全都记录下来~
……

就这样，直到整个HTML被渲染完成。

答主似乎理解成了CSS里面写一个.dom1就是让HTML解释器去找class=dom1的HTML元素，全都改成{...}里面的样式，这个理解是错误的。

所以，在写CSS的时候，一些公用的东西，可以单独拿出来，方便修改，也方便后面使用。比如：
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 追加----------

CSS会追加两次吗？

每一个DOM都有我们能定义的CSS的所有属性，我们定义样式只是去改变他们的那些样式属性而已。
比如：<p>默认样式的p标签</p>
我们没有指定他的颜色，但是实际上，这个p标签的color属性是#000（黑色的）。

然后重复定义的样式会覆盖前面的定义，比如：
CSS:

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

HTML:

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

↑ 这个p标签颜色最后会是#333。因为#222虽然也被记录下来了，但是他在前面，被覆盖了。

如果HTML如下，也会被覆盖：
HTML:

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

↑ 这个p标签颜色会是#444。因为标签自带的样式定义优先级是最高的。（他定义在所有样式表后面。）

有一个方法可以不被覆盖，那就是加入!important。(IE6及以下不支持)
具体可以参考http://www.w3chtml.com/css3/r...

CSS:

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

HTML:

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

↑ 这是p标签的颜色就是#222，因为加了!important，所后面给他的样式都不会覆盖这一条。

Answer 2

你这个不是样式吗？什么叫选取dom 啊，应该是渲染dom吧
你这样会渲染两次的，很明显第一种写法比较好。

Answer 3

看你的应用场景，其实text-align:center可以学着像bootstrap那样，单独抽取出来，用多个class并行

这样不止他们两个可以用，其他元素也可以共用这个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） 管你什么样式呢，反正打包后都抽成公共的了~

Answer 5

无论你CSS怎样写，CSS解析器会按优先级规则，在渲染DOM元素前计算出最终应用到这个DOM元素上的样式
并不是从上到下一次应用样式

Answer 6

如果是像你这样的选择器的话 完全没有必要用第一种。因为提取出来的完全没有用。复用不了。
你可以将可以复用的功能提取出来，比方说：

.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

这两种写法都可以，不过推荐写成公共样式，这样代码简洁一些，也方便管理。

Answer 8

你的第一个写法，确实会对同一个渲染两次。另，达到同样的效果，代码越少越好。你该去了解了解sass或less.