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% }

在這個例子(來自inuit.css’s table grid system)中，將 CSS 放在一行內可以使得代碼更緊湊。

相信大家已經學會CSS樣式編寫了吧!感謝大家對我們網站的支持!

相關推薦：

CSS居中浮動元素的方法簡介