ID and class naming
ID和class(類)名總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。
應(yīng)該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且發(fā)生變化的可能性最小。
通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區(qū)分他們，使他們具有特殊意義，通常需要為“幫手”。
盡管class(類)名和ID 的語義化對于計算機(jī)解析來說沒有什么實際的意義，
語義化的名稱 通常是正確的選擇，因為它們所代表的信息含義，不包含表現(xiàn)的限制。
不推薦
.fw-800 { font-weight: 800;} .red { color: red;}推薦
.heavy { font-weight: 800;} .important { color: red;} 合理的避免使用ID
一般情況下ID不應(yīng)該被應(yīng)用于樣式。
ID的樣式不能被復(fù)用并且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網(wǎng)頁或整個站點中的位置。
盡管如此，你應(yīng)該始終考慮使用class，而不是id，除非只使用一次。
不推薦
#content .title { font-size: 2em;}推薦
.content .title { font-size: 2em;} 另一個反對使用ID的觀點是含有ID選擇器權(quán)重很高。
一個只包含一個ID選擇器權(quán)重高于包含1000個class(類)名的選擇器，這使得它很奇怪。
// 這個選擇器權(quán)重高于下面的選擇器#content .title { color: red;} // than this selector!html body div.content.news-content .title.content-title.important { color: blue;} CSS選擇器中避免標(biāo)簽名
當(dāng)構(gòu)建選擇器時應(yīng)該使用清晰， 準(zhǔn)確和有語義的class(類)名。不要使用標(biāo)簽選擇器。 如果你只關(guān)心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護(hù)。
從分離的角度考慮,在表現(xiàn)層中不應(yīng)該分配html標(biāo)記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個div將被轉(zhuǎn)換成article。
如果你只使用具有實際意義的class(類)名，
并且不使用元素選擇器，那么你只需要改變你的html標(biāo)記，而不用改動你的CSS。
不推薦
div.content > header.content-header > h2.title { font-size: 2em;}推薦
.content > .content-header > .title { font-size: 2em;} 盡可能的精確
很多前端開發(fā)人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。
有時，這可能會導(dǎo)致疼痛的設(shè)計問題并且有時候可能會很耗性能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。
考慮下面的DOM:
<article class="content news-content"> <span class="title">News event</span> <div class="content-body"> <div class="title content-title"> Check this out </div> <p>This is a news article content</p> <div class="teaser"> <div class="title">Buy this</div> <div class="teaser-content">Yey!</div> </div> </div></article>
下面的CSS將應(yīng)用于有title類的全部三個元素。
然后，要解決content類下的title類 和 teaser類下的title類下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。
不推薦
.content .title { font-size: 2rem;}推薦
.content > .title { font-size: 2rem;} .content > .content-body > .title { font-size: 1.5rem;} .content > .content-body > .teaser > .title { font-size: 1.2rem;} 縮寫屬性
CSS提供了各種縮寫屬性（如 font 字體）應(yīng)該盡可能使用，即使在只設(shè)置一個值的情況下。
使用縮寫屬性對于代碼效率和可讀性是有很有用的。
不推薦
css 代碼:
border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;
推薦
css 代碼:
border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;
0 和 單位
省略“0”值后面的單位。不要在0值后面使用單位，除非有值。
不推薦
css 代碼:
padding-bottom: 0px;margin: 0em;
推薦
css 代碼:
padding-bottom: 0;margin: 0;
十六進(jìn)制表示法
在可能的情況下，使用3個字符的十六進(jìn)制表示法。
顏色值允許這樣表示，
3個字符的十六進(jìn)制表示法更簡短。
始終使用小寫的十六進(jìn)制數(shù)字。
不推薦
color: #FF33AA;
推薦
color: #f3a;
ID 和 Class（類） 名的分隔符
使用連字符（中劃線）分隔ID和Class（類）名中的單詞。為了增強(qiáng)課理解性，在選擇器中不要使用除了連字符（中劃線）以為的任何字符（包括沒有）來連接單詞和縮寫。
另外，作為該標(biāo)準(zhǔn)，預(yù)設(shè)屬性選擇器能識別連字符（中劃線）作為單詞[attribute|=value]的分隔符，
所以最好的堅持使用連字符作為分隔符。
不推薦
.demoimage {}.error_status {}推薦
#video-id {}.ads-sample {}Hacks
避免用戶代理檢測以及CSS“hacks” – 首先嘗試不同的方法。通過用戶代理檢測或特殊的CSS濾鏡，變通的方法和 hacks 很容易解決樣式差異。為了達(dá)到并保持一個有效的和可管理的代碼庫，這兩種方法都應(yīng)該被認(rèn)為是最后的手段。換句話說，從長遠(yuǎn)來看，用戶代理檢測和hacks
會傷害項目，作為項目往往應(yīng)該采取阻力最小的途徑。也就是說，輕易允許使用用戶代理檢測和hacks 以后將過于頻繁。
聲明順序
這是一個選擇器內(nèi)書寫CSS屬性順序的大致輪廓。這是為了保證更好的可讀性和可掃描重要。
作為最佳實踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：
結(jié)構(gòu)性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現(xiàn)性屬性：
background, border etc.
font, text
不推薦
.box { font-family: 'Arial', sans-serif; border: 3px solid #ddd; left: 30%; position: absolute; text-transform: uppercase; background-color: #eee; right: 30%; isplay: block; font-size: 1.5rem; overflow: hidden; padding: 1em; margin: 1em;}推薦
.box { display: block; position: absolute; left: 30%; right: 30%; overflow: hidden; margin: 1em; padding: 1em; background-color: #eee; border: 3px solid #ddd; font-family: 'Arial', sans-serif; font-size: 1.5rem; text-transform: uppercase;}聲明結(jié)束
為了保證一致性和可擴(kuò)展性，每個聲明應(yīng)該用分號結(jié)束，每個聲明換行。
不推薦
css 代碼:.test { display: block; height: 100px}推薦
css 代碼:
.test { display: block; height: 100px;}屬性名結(jié)束
屬性名的冒號后使用一個空格。出于一致性的原因，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。
不推薦
css 代碼:
h3 { font-weight:bold;}推薦
css 代碼:h3 { font-weight: bold;}選擇器和聲明分離
每個選擇器和屬性聲明總是使用新的一行。
不推薦
css 代碼:
a:focus, a:active { position: relative; top: 1px;}推薦
css 代碼:
h1,h2,h3 { font-weight: normal; line-height: 1.2;}規(guī)則分隔
規(guī)則之間始終有一個空行（雙換行符）分隔。
推薦
css 代碼:
html { background: #fff;} body { margin: auto; width: 50%;}CSS引號
屬性選擇器或?qū)傩灾涤秒p引號（””），而不是單引號（”）括起來。
URI值（url()）不要使用引號。
不推薦
css 代碼:
@import url('//cdn.com/foundation.css'); html { font-family: 'open sans', arial, sans-serif;} body:after { content: 'pause';}推薦
css 代碼:
@import url(//cdn.com/foundation.css); html { font-family: "open sans", arial, sans-serif;} body:after { content: "pause";}選擇器嵌套 (SCSS)
在Sass中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內(nèi)容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，
可以使用常規(guī)的CSS選擇器鏈。
這將防止您的腳本看起來過于復(fù)雜。
不推薦
css 代碼:
// Not a good example by not making use of nesting at all.content { display: block;} .content > .news-article > .title { font-size: 1.2em;}不推薦
css 代碼:
// Using nesting is better but not in all cases// Avoid nesting when there is no attributes and use selector chains instead.content { display: block; > .news-article { > .title { font-size: 1.2em; } }}推薦
css 代碼:
// This example takes the best approach while nesting but use selector chains where possible.content { display: block; > .news-article > .title { font-size: 1.2em; }}嵌套中引入 空行 (SCSS)
嵌套選擇器和CSS屬性之間空一行。
不推薦
css 代碼:
.content { display: block; > .news-article { background-color: #eee; > .title { font-size: 1.2em; } > .article-footnote { font-size: 0.8em; } }}推薦
css 代碼:
.content { display: block; > .news-article { background-color: #eee; > .title { font-size: 1.2em; } > .article-footnote { font-size: 0.8em; } }}上下文媒體查詢(SCSS)
在Sass中，當(dāng)你嵌套你的選擇器時也可以使用上下文媒體查詢。
在Sass中，你可以在任何給定的嵌套層次中使用媒體查詢。
由此生成的CSS將被轉(zhuǎn)換，這樣的媒體查詢將包裹選擇器的形式呈現(xiàn)。
這技術(shù)非常方便，
有助于保持媒體查詢屬于的上下文。
第一種方法這可以讓你先寫你的手機(jī)樣式，然后在任何你需要的地方
用上下文媒體查詢以提供桌面樣式。
不推薦
css 代碼:
// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate// the content in the media query to the content in the upper part (mobile style) .content-page { font-size: 1.2rem; > .main { background-color: whitesmoke; > .latest-news { padding: 1rem; > .news-article { padding: 1rem; > .title { font-size: 2rem; } } } > .content { margin-top: 2rem; padding: 1rem; } } > .page-footer { margin-top: 2rem; font-size: 1rem; }} @media screen and (min-width: 641px) { .content-page { font-size: 1rem; > .main > .latest-news > .news-article > .title { font-size: 3rem; } > .page-footer { font-size: 0.8rem; } }}
推薦
css 代碼:
// This is the same example as above but here we use contextual media queries in order to put the different styles// for different media into the right context. .content-page { font-size: 1.2rem; @media screen and (min-width: 641px) { font-size: 1rem; } > .main { background-color: whitesmoke; > .latest-news { padding: 1rem; > .news-article { padding: 1rem; > .title { font-size: 2rem; @media screen and (min-width: 641px) { font-size: 3rem; } } } } > .content { margin-top: 2rem; padding: 1rem; } } > .page-footer { margin-top: 2rem; font-size: 1rem; @media screen and (min-width: 641px) { font-size: 0.8rem; } }}嵌套順序和父級選擇器(SCSS)
當(dāng)使用Sass的嵌套功能的時候，
重要的是有一個明確的嵌套順序，
以下內(nèi)容是一個SCSS塊應(yīng)具有的順序。
當(dāng)前選擇器的樣式屬性
父級選擇器的偽類選擇器 (:first-letter, :hover, :active etc)
偽類元素 (:before and :after)
父級選擇器的聲明樣式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒體查詢
子選擇器作為最后的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.
Recommended
css 代碼:
.product-teaser { // 1. Style attributes display: inline-block; padding: 1rem; background-color: whitesmoke; color: grey; // 2. Pseudo selectors with parent selector &:hover { color: black; } // 3. Pseudo elements with parent selector &:before { content: ""; display: block; border-top: 1px solid grey; } &:after { content: ""; display: block; border-top: 1px solid grey; } // 4. State classes with parent selector &.active { background-color: pink; color: red; // 4.2. Pseuso selector in state class selector &:hover { color: darkred; } } // 5. Contextual media queries @media screen and (max-width: 640px) { display: block; font-size: 2em; } // 6. Sub selectors > .content > .title { font-size: 1.2em; // 6.5. Contextual media queries in sub selector @media screen and (max-width: 640px) { letter-spacing: 0.2em; text-transform: uppercase; } }}
新聞熱點
疑難解答
