CSS樣式編寫的簡明技巧介紹

歡迎大家在這裡學習CSS樣式編寫的簡明技巧!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

[selector]{

[property]:[value];

[<- Declaration ->]

}

< p>[選擇器]{

[屬性]:[值];

[<- 聲明 ->]

}

編寫 CSS 樣式時，我習慣遵守這些規則：

class 名稱以連字符(-)連接，除了下文提到的 BEM 命名法;

縮進 4 空格;

聲明拆分成多行;

聲明以相關性順序排列，而非字母順序;

有前綴的聲明適當縮進，從而對齊其值;

縮進樣式集從而反映 DOM;

保留最後一條聲明結尾的分號。

例如：

CSS Code復制內容到剪貼板

.widget{

padding:10px;

border:1px solid #BADA55;

background-color:#C0FFEE;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

}

.widget-heading{

font-size:1.5rem;

line-height:1;

font-weight:bold;

color:#BADA55;

margin-right:-10px;

margin-left: -10px;

padding:0.25em;

}

我們可以發現，.widget-heading 是 .widget 的子元素，因為前者的樣式集比後者多縮進了一級。這樣通過縮進就可以讓開發者在閱讀代碼時快速獲取這樣的重要信息。

我們還可以發現 .widget-heading 的聲明是根據其相關性排列的：.widget-heading 是行間元素，所以我們先添加字體相關的樣式聲明，接下來是其它的。

以下是一個沒有拆分成多行的例子：

CSS Code復制內容到剪貼板

.t10 { width:10% }

.t20 { width:20% }

.t25 { width:25% } /* 1/4 */

.t30 { width:30% }

.t33 { width:33.333% } /* 1/3 */

.t40 { width:40% }

.t50 { width:50% } /* 1/2 */

.t60 { width:60% }

.t66 { width:66.666% } /* 2/3 */

.t70 { width:70% }

.t75 { width:75% } /* 3/4*/

.t80 { width:80% }

.t90 { width:90% }

CSS樣式編寫的簡明技巧精彩內容就到這裡了!希望大家可以好好利用!

相關推薦：

CSS中一些@規則的用法介紹