製作CSS類的最佳方法是什麼？

HTML：

<div class="a"> 
    <div class="b"> 
    <div class="foo"> 
<div class="a2"> 
    <div class="b2"> 
    <div class="foo"> 
<div class="a3"> 
    <div class="b3"> 
    <div class="foo"> 
<!--many more-->

和css：

.a .b .foo { /*my style*/ }

或

HTML：

<div class="a"> 
    <div class="b"> 
    <div class="foo specific-foo"> 
<div class="a2"> 
    <div class="b2"> 
    <div class="foo"> 
<div class="a3"> 
    <div class="b3"> 
    <div class="foo"> 
<!--many more-->

個

CSS：

.specific-foo { /*my style*/ }

是否有推薦的哪個更好？

--update

無法使用的ID，因爲我使用JSF，這將產生前綴號碼的ID。

來源

2016-05-13 Tom Brito

爲什麼不只是使用'.c {/ *您的風格* /}'？ –

更好？怎麼樣？你的例子之間的結構是相同的，但是選擇器是不同的。 – j08691

@ web-tiki因爲在代碼的另一部分會有另一個c。我需要具體說明。 –

使用CSS ID，ID做成特定到一格和類倍數。

HTML：

<div class="a"> 
    <div class="b"> 
    <div id="c>

CSS：

.a {} .b{} #c{}

你可以閱讀更多關於ID選擇here。

編輯：

考慮到你不能使用的ID，還有其他的CSS選擇器來考慮：

使用> selecetor特別指明父子關係。

在以下示例中，您選擇的是b的子項，即a的子項，爲您的CSS提供更具體的定義並使您的代碼具有唯一性。

.a > .b > .c

否則使用類是可以接受的，仍然有效，但讓人難以當你下課後下課後開始編碼類...

來源

2016-05-13 13:33:32

對不起，我忘了說我不能使用ID。我更新了這個問題。 –

@TomBrito我在回答中添加了一個編輯過的部分，但是考慮到其他人可能會遇到相同的問題，請保留ID信息。 –

使用ID有獨特的選擇。

如果這不是一種選擇，不是像

.a > .b > .c

指定選擇是否有一個建議，對於哪個更好？ - 不，這取決於你的需求和結構

來源

2016-05-13 13:33:51 Justinas

對不起，我忘了說我不能使用ID。我更新了這個問題。 –

.specific-c僅此元素具體，所以你不應該給它一個新的類。

以嵌套的方式對其進行格式化。

由於W3C描述：

使用class在考慮語義。

.container，.navbar,.btn-info是好名字。他們是可重用和描述性。

.title-in-news-section不是。

如果.specific-c情況在比預期更多的地方再次出現一天，請給它自己的類或將它分成幾個泛型類。

Bootstrap就是一個很好的例子。 All their class names是語義和通用的，是什麼使它們如此強大和易於使用。

來源

2016-05-13 13:49:26

如前所述，第二種方法是優選的 - 第一個也是會誤應用到C中：

<div class="a"> 
<div class="foo"> 
<div class="b"> 
<div class="bar"> 
<div class="c">

您還可以做什麼肖恩·洛夫廷建議，並修改第一種情況是：

.a > .b > .c

修改這種方式，.a > .b > .c是優選的，因爲這樣一來，你不需要額外的CSS類（specific-c）。一般來說，班級越少越好。

來源

2016-05-13 13:52:55 Anand

很多這是根據個人喜好。

對我個人而言，我是以爲特定，因爲我需要。例如：

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     </div> 
    </div> 
</div>

如果我想要的風格.c，使字體顏色紅色，我想簡單地聲明

.c { 
    color: red; 
}

但是，進一步下跌的線有可能是覆蓋一個風格，如：

.a .c { 
    color: green; 
}

在這種情況下，我需要覆蓋.a .c {}聲明。我可以在許多方面做到這一點，但以下就足夠了：

.b > .c { 
    color: red; 
}

如果我想在未來再次重寫，我可以使用.a > .b > .c {}

有沒有點在編寫真的因爲除非特別強調，否則你將無法覆蓋它，或者使用可怕的!important - AVOID使用!important，除非它非常重要，或者你有一個合理的理由。

小提琴：https://jsfiddle.net/67pnbnxf/1/

來源

2016-05-13 13:57:48

製作CSS類的最佳方法是什麼？

回答

相關問題