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