css代碼優化篇

心情比較不咋地，不想說什麼了

代碼演示以下：

不推薦

1. .fw-800 {
2. font-weight: 800;
3. }
5. .red {
6. color: red;
7. }

推薦

1. .heavy {
2. font-weight: 800;
3. }
5. .important {
6. color: red;
7. }

 

合理的避免使用ID

通常狀況下ID不該該被應用於樣式。
ID的樣式不能被複用而且每一個頁面中你只能使用一次ID。
使用ID惟一有效的是肯定網頁或整個站點中的位置。
儘管如此，你應該始終考慮使用class，而不是id，除非只使用一次。

不推薦

1. #content .title {
2. font-size: 2em;
3. }

推薦

1. .content .title {
2. font-size: 2em;
3. }

另外一個反對使用ID的觀點是含有ID選擇器權重很高。
一個只包含一個ID選擇器權重高於包含1000個class(類)名的選擇器，這使得它很奇怪。

1. // 這個選擇器權重高於下面的選擇器
2. #content .title {
3. color: red;
4. }
6. // than this selector!
7. html body div.content.news-content .title.content-title.important {
8. color: blue;
9. }

 

CSS選擇器中避免標籤名

當構建選擇器時應該使用清晰， 準確和有語義的class(類)名。不要使用標籤選擇器。 若是你只關心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護。

從分離的角度考慮,在表現層中不該該分配html標記/語義。
它多是一個有序列表須要被改爲一個無序列表，或者一個div將被轉換成article。
若是你只使用具備實際意義的class(類)名，
而且不使用元素選擇器，那麼你只須要改變你的html標記，而不用改動你的CSS。

不推薦

1. div.content > header.content-header > h2.title {
2. font-size: 2em;
3. }

推薦

1. .content > .content-header > .title {
2. font-size: 2em;
3. }

 

儘量的精確

不少前端開發人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和後代選擇器的區別）。
有時，這可能會致使疼痛的設計問題而且有時候可能會很耗性能。
然而，在任何狀況下，這是一個很是很差的作法。
若是你不寫很通用的，須要匹配到DOM末端的選擇器， 你應該老是考慮直接子選擇器。

考慮下面的DOM:

1. <article class="content news-content">
2. <span class="title">News event</span>
3. <div class="content-body">
4. <div class="title content-title">
5. Check this out
6. </div>
8. <p>This is a news article content</p>
10. <div class="teaser">
11. <div class="title">Buy this</div>
12. <div class="teaser-content">Yey!</div>
13. </div>
14. </div>
15. </article>

下面的CSS將應用於有title類的所有三個元素。
而後，要解決content類下的title類 和 teaser類下的title類下不一樣的樣式，這將須要更精確的選擇器再次重寫他們的樣式。

不推薦

1. .content .title {
2. font-size: 2rem;
3. }

推薦

1. .content > .title {
2. font-size: 2rem;
3. }
5. .content > .content-body > .title {
6. font-size: 1.5rem;
7. }
9. .content > .content-body > .teaser > .title {
10. font-size: 1.2rem;
11. }

 

縮寫屬性

CSS提供了各類縮寫屬性（如 font 字體）應該儘量使用，即便在只設置一個值的狀況下。

使用縮寫屬性對於代碼效率和可讀性是有頗有用的。

不推薦

1. border-top-style: none;
2. font-family: palatino, georgia, serif;
3. font-size: 100%;
4. line-height: 1.6;
5. padding-bottom: 2em;
6. padding-left: 1em;
7. padding-right: 1em;
8. padding-top: 0;

推薦

1. border-top: 0;
2. font: 100%/1.6 palatino, georgia, serif;
3. padding: 0 1em 2em;

 

0 和 單位

省略「0」值後面的單位。不要在0值後面使用單位，除非有值。

不推薦

1. padding-bottom: 0px;
2. margin: 0em;

推薦

1. padding-bottom: 0;
2. margin: 0;

 

十六進制表示法

在可能的狀況下，使用3個字符的十六進制表示法。
顏色值容許這樣表示，
3個字符的十六進制表示法更簡短。

始終使用小寫的十六進制數字。

不推薦

1. color: #FF33AA;

推薦

1. color: #f3a; //注意小寫

 

ID 和 Class（類） 名的分隔符

使用連字符（中劃線）分隔ID和Class（類）名中的單詞。爲了加強課理解性，在選擇器中不要使用除了連字符（中劃線）覺得的任何字符（包括沒有）來鏈接單詞和縮寫。

另外，做爲該標準，預設屬性選擇器能識別連字符（中劃線）做爲單詞[attribute|=value]的分隔符，
因此最好的堅持使用連字符做爲分隔符。

不推薦

1. .demoimage {}      //駝峯式命名或者連詞符
2. .error_status {}   //不要使用下劃線

推薦

1. #video-id {}
2. .ads-sample {}

 

Hacks

避免用戶代理檢測以及CSS「hacks」 – 首先嚐試不一樣的方法。經過用戶代理檢測或特殊的CSS濾鏡，變通的方法和 hacks 很容易解決樣式差別。爲了達到並保持一個有效的和可管理的代碼庫，這兩種方法都應該被認爲是最後的手段。換句話說，從長遠來看，用戶代理檢測和hacks
會傷害項目，做爲項目每每應該採起阻力最小的途徑。也就是說，輕易容許使用用戶代理檢測和hacks 之後將過於頻繁。

 

聲明順序

這是一個選擇器內書寫CSS屬性順序的大體輪廓。這是爲了保證更好的可讀性和可掃描重要。

做爲最佳實踐，咱們應該遵循如下順序（應該按照下表的順序）：

1. 結構性屬性：
   1. display
   2. position, left, top, right etc.
   3. overflow, float, clear etc.
   4. margin, padding
2. 表現性屬性：
   1. background, border etc.
   2. font, text

不推薦

1. .box {
2. font-family: 'Arial', sans-serif;
3. border: 3px solid #ddd;
4. left: 30%;
5. position: absolute;
6. text-transform: uppercase;
8. right: 30%;
9. isplay: block;
10. font-size: 1.5rem;
11. overflow: hidden;
12. padding: 1em;
13. margin: 1em;
14. }

推薦

1. .box {
2. display: block;
3. position: absolute;
4. left: 30%;
5. right: 30%;
6. overflow: hidden;
7. margin: 1em;
8. padding: 1em;
10. border: 3px solid #ddd;
11. font-family: 'Arial', sans-serif;
12. font-size: 1.5rem;
13. text-transform: uppercase;
14. }

 

聲明結束

爲了保證一致性和可擴展性，每一個聲明應該用分號結束，每一個聲明換行。

不推薦

1. .test {
2. display: block; height: 100px 
3. }

推薦

1. .test { 
2. display: block;
3. height: 100px;
4. }

 

屬性名結束

屬性名的冒號後使用一個空格。出於一致性的緣由，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。

不推薦

1. h3 {
2. font-weight:bold;
3. }

推薦

1. h3 {
2. font-weight: bold;
3. }

 

選擇器和聲明分離

每一個選擇器和屬性聲明老是使用新的一行。

不推薦

1. a:focus, a:active {
2. position: relative; top: 1px;
3. }

推薦

1. h1,
2. h2,
3. h3 {
4. font-weight: normal;
5. line-height: 1.2;
6. }

 

規則分隔

規則之間始終有一個空行（雙換行符）分隔。

推薦

1. html {
2. background: #fff;
3. }
5. body {
6. margin: auto;
7. width: 50%;
8. }

 

CSS引號

屬性選擇器或屬性值用雙引號（」」），而不是單引號（」）括起來。
URI值（url()）不要使用引號。

不推薦

1. @import url('//cdn.com/foundation.css');
3. html {
4. font-family: 'open sans', arial, sans-serif;
5. }
7. body:after {
8. content: 'pause';
9. }

推薦

1. @import url(//cdn.com/foundation.css);
3. html {
4. font-family: "open sans", arial, sans-serif;
5. }
7. body:after {
8. content: "pause";
9. }

 

選擇器嵌套 (SCSS)

在Sass中你能夠嵌套選擇器，這可使代碼變得更清潔和可讀。嵌套全部的選擇器，但儘可能避免嵌套沒有任何內容的選擇器。
若是你須要指定一些子元素的樣式屬性，而父元素將不什麼樣式屬性，
可使用常規的CSS選擇器鏈。
這將防止您的腳本看起來過於複雜。

不推薦

1. // Not a good example by not making use of nesting at all
2. .content {
3. display: block;
4. }
6. .content > .news-article > .title {
7. font-size: 1.2em;
8. }

不推薦

1. // Using nesting is better but not in all cases
2. // Avoid nesting when there is no attributes and use selector chains instead
3. .content {
4. display: block;
6. > .news-article {
7. > .title {
8. font-size: 1.2em;
9. }
10. }
11. }

推薦

1. // This example takes the best approach while nesting but use selector chains where possible
2. .content {
3. display: block;
5. > .news-article > .title {
6. font-size: 1.2em;
7. }
8. }

 

嵌套中引入 空行 (SCSS)

嵌套選擇器和CSS屬性之間空一行。

不推薦

1. .content {
2. display: block;
3. > .news-article {
5. > .title {
6. font-size: 1.2em;
7. }
8. > .article-footnote {
9. font-size: 0.8em;
10. }
11. }
12. }

推薦

1. .content {
2. display: block;
4. > .news-article {
7. > .title {
8. font-size: 1.2em;
9. }
11. > .article-footnote {
12. font-size: 0.8em;
13. }
14. }
15. }

 

上下文媒體查詢(SCSS)

在Sass中，當你嵌套你的選擇器時也可使用上下文媒體查詢。
在Sass中，你能夠在任何給定的嵌套層次中使用媒體查詢。
由今生成的CSS將被轉換，這樣的媒體查詢將包裹選擇器的形式呈現。

這技術很是方便，
有助於保持媒體查詢屬於的上下文。

第一種方法這可讓你先寫你的手機樣式，而後在任何你須要的地方
用上下文媒體查詢以提供桌面樣式。

不推薦

1. // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
2. // on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
3. // the content in the media query to the content in the upper part (mobile style)
5. .content-page {
6. font-size: 1.2rem;
8. > .main {
11. > .latest-news {
12. padding: 1rem;
14. > .news-article {
15. padding: 1rem;
17. > .title {
18. font-size: 2rem;
19. }
20. }
21. }
23. > .content {
24. margin-top: 2rem;
25. padding: 1rem;
26. }
27. }
29. > .page-footer {
30. margin-top: 2rem;
31. font-size: 1rem;
32. }
33. }
35. @media screen and (min-width: 641px) {
36. .content-page {
37. font-size: 1rem;
39. > .main > .latest-news > .news-article > .title {
40. font-size: 3rem;
41. }
43. > .page-footer {
44. font-size: 0.8rem;
45. }
46. }
47. }

推薦

1. // This is the same example as above but here we use contextual media queries in order to put the different styles
2. // for different media into the right context.
4. .content-page {
5. font-size: 1.2rem;
7. @media screen and (min-width: 641px) {
8. font-size: 1rem;
9. }
11. > .main {
14. > .latest-news {
15. padding: 1rem;
17. > .news-article {
18. padding: 1rem;
20. > .title {
21. font-size: 2rem;
23. @media screen and (min-width: 641px) {
24. font-size: 3rem;
25. }
26. }
27. }
28. }
30. > .content {
31. margin-top: 2rem;
32. padding: 1rem;
33. }
34. }
36. > .page-footer {
37. margin-top: 2rem;
38. font-size: 1rem;
40. @media screen and (min-width: 641px) {
41. font-size: 0.8rem;
42. }
43. }
44. }

 

嵌套順序和父級選擇器(SCSS)

當使用Sass的嵌套功能的時候，
重要的是有一個明確的嵌套順序，
如下內容是一個SCSS塊應具備的順序。

1. 當前選擇器的樣式屬性
2. 父級選擇器的僞類選擇器 (:first-letter, :hover, :active etc)
3. 僞類元素 (:before and :after)
4. 父級選擇器的聲明樣式 (.selected, .active, .enlarged etc.)
5. 用Sass的上下文媒體查詢
6. 子選擇器做爲最後的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

1. .product-teaser {
2. // 1. Style attributes
3. display: inline-block;
4. padding: 1rem;
6. color: grey;
8. // 2. Pseudo selectors with parent selector
9. &:hover {
10. color: black;
11. }
13. // 3. Pseudo elements with parent selector
14. &:before {
15. content: "";
16. display: block;
17. border-top: 1px solid grey;
18. }
20. &:after {
21. content: "";
22. display: block;
23. border-top: 1px solid grey;
24. }
26. // 4. State classes with parent selector
27. &.active {
29. color: red;
31. // 4.2. Pseuso selector in state class selector
32. &:hover {
33. color: darkred;
34. }
35. }
37. // 5. Contextual media queries
38. @media screen and (max-width: 640px) {
39. display: block;
40. font-size: 2em;
41. }
43. // 6. Sub selectors
44. > .content > .title {
45. font-size: 1.2em;
47. // 6.5. Contextual media queries in sub selector
48. @media screen and (max-width: 640px) {
49. letter-spacing: 0.2em;
50. text-transform: uppercase;
51. }
52. }
53. }

 

 

Media媒體查詢用法

 

1.什麼是媒體查詢  爲何要使用媒體查詢 用它能作什麼

根據客戶端的戒指和屏幕大俠，提供不一樣的樣式表或者只展現樣式表中一部分 爲了更好的展現頁面效果針對不一樣設備

加載不一樣的樣式表文件無需修改或者從新書寫css源代碼文件就能夠展現出無bug的頁面元素

1. 媒體查詢的介質類型和使用方法

  1)、all - 所有媒體類型

 Print - 提供給打印機的樣式，最經常使用的類型

 Screen - 彩色屏幕

 Speech - 語音朗讀

 2)、內聯的使用方法

      媒體查詢具備返回值 其值是Boolean類型 條件爲真值能夠進行操做 其值爲假值時文件被下載可是不被操做

      <style>

@media(max-width:600px){

  .className{

      ElementsAttr:value;

   }

}

     </style>

  2)、外鏈引入link標籤使用媒體查詢

<link rel=’stylesheet’ media=’(max-width:value)’ href=’stylesheetFile.css’>

  3)、設置meta標籤使用媒體查詢(css2寫法)

<meta name=’viewport’content=」width=device-width,initial-scale=1,maximun-scale=1,minimum-scale=1,user-scalable=no」>

 

1. Media  具備邏輯操做符功能  

邏輯操做符  not、and、only能夠用來構建複雜的媒體查詢

and

   操做符用來把多個媒體屬性組合起來，合併到同一條媒體查詢中。只有每一個屬性都爲真值時才能夠觸發媒體查詢，可用逗號分隔

    eg1: @media tv and (min-width:700px){

              媒體查詢盡在電視媒體上，可視區域不小於700像素 時  纔有效

        }

    eg2: @media(min-width:700px),handheld and (orientation:landscape){

              媒體查詢盡在電視媒體上，可視區域不小於700像素而且是橫屏時纔有效

        }

not

   關鍵字用來排除符合表達式的設備

Only

  防止老舅的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式

  eg: <link rel=」stylesheet」 media=」only screen and (color)」 href=」stylesheetFile.css」/>

 

 

/**/

CSS樣式表繼承屬性

    Azimuth

    Border-collapse

    Border-spacing

    Caption-side

    Color

    Cursor

    Direction

    elevation