CSS 和 CSS 前處理器簡介

w3cplus發表於2015-04-06
CSS

我已經想了很多關於自己編寫的CSS，其當前的狀態和這麼多年來是如何改變的。

我通常在開始做一個新專案的時候都會使用自己的框架Motherplate。它使用了Sass和Compass。大部分的類名最初都沒有基於任何其他的框架。也不是故意這麼做的。

現在，我認識的大多數開發人員都在使用Bootstrap。如果一個朋友要啟動一個新專案，得到一些應用程式上的幫助，我通常會建議他們使用Bootstrap框架。這樣做是有一定道理的，特別是他們的原型和版本都還是0的時候，使用Bootstrap是快速和有效的。

大多數專案中我都會通常使用“自己”的CSS，傾向於自己的習慣，將記在腦海中的東西運用到現在的專案中，這對於管理CSS來說是一件可怕的事情。這讓其他人更難在專案中做出貢獻，也難以維護一個更大的專案，還難以編寫出乾淨的程式碼。

Bootstrap，BEM，SMACC和其他的框架與方法，通過實踐證明，最好學使用常用的名給你的元素全名。

CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. — Wikipedia

CSS 和 CSS 前處理器簡介

我們都知道，CSS入門簡單，深入就比較難。可謂是，樣式簡單，但難以維護。需要考慮大量的樣式，覆蓋、權重和很多!important。

div {
  font-size: 14px;
  margin: 0 0 20px;
  padding: 10px;
}

Sass/SCSS (Syntactically Awesome Style Sheets)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — Sass-Lang

自從2007年Sass誕生以來，對於匯入和維護多個樣式表尤其有用。特別是其變數，複用模式和其他強大的特性。

Sass(Syntactically Awesome Style Sheets)是第一種語法格式。SCSS(Sassy CSS)是後面出來的一種Sass語法，其更類似於CSS語法。你可能比較喜歡使用SCSS。到現在，我無法想象在專案中不使用SCSS，而只純使用CSS是怎樣的痛苦。

$primary-color: purple;
ul {
  font-size: 14px;
  margin: 0 0 20px;
  li {
    margin-bottom: 20px;
    a {
      color: $primary-color;
    }
  }
}

擴充套件閱讀

Compass

Compass is a Sass extension and… it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that make it a more powerful companion tool to Sass. — Hongkiat

Compass的mixin非常的方便。對我來說，Compass一個最大的特性是，解決了瀏覽器字首的問題。不用擔心沒輸入瀏覽器字首而引起的瀏覽器渲染問題。

@import "compass/css3"
div {
  @include border-radius(5px);
  @include box-shadow(0 0 10px rgba(0, 0, 0, .1));
}

Compass其實是Sass的一個擴充套件，也可以說是最早使用Sass寫的一個擴充套件（框架），並且是一個開源框 架，其最大的特色就是Compass的mixins和Functions可以幫助我們做很多事情，不需要了解這些mixins和Function實質原理，只需要瞭解其怎麼呼叫就行。這對於初學Sass的同學，或使用Sass來做專案的同學起到了很大的幫助，而對於想深入學習Sass的同學，也提供了一個很好的樣本。

擴充套件閱讀

Less

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. — Less

LESS和Sass非常類似，不同的是他依賴Node（JavaScript）環境編譯，而不是Ruby環境。其實我自己從來沒有使用LESS做過專案。

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

擴充套件閱讀

OOCSS (Object Oriented CSS)

…a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. — Nicole Sullivan

更高層次是在專案中思考如何重用樣式、模式和抽像模組。一個模組應該有一個主修飾符，不應該太具體或太深入，比如.box-heading要比ul li .box-heading更好。

<div class="item">
  <ul class="item-list">
    <li class="item-list--item">
      <h3 class="item-heading">...

.item {
  ...
}
.item-list {
  ...
}.item-list--item {
  ...
}
.item-heading {
  ...
}

擴充套件閱讀

SMACCS (Scalable and Modular Architecture for CSS)

…an attempt to document a consistent approach to site development when using CSS. — SMACSS

Jonathan Snook為SMACCS寫了一本書。其中最佳實踐就是如何給你的HTML元素定義一個好的類名。

在整個系列中，包括了base（預設部分），modules(可重用部分),staes（狀態，比如隱藏和當前）和主題(themes)。修飾符使用的是–，子模組使用__符號。

<div class=“container”>
  <div class=“container-header”>
    <div class=“container-header__title”>
      <h1 class=“container-header__title--home”>

擴充套件閱讀

BEM (Block, Element, Modifier)

The BEM approach ensures that everyone participating in the development of a website is working with the same codebase and using the same terminology — BEM Methodology

和SMACCS非常類似，主要用來如何給專案命名。一個簡單命名和容易讓別人一起工作的方法。比如選項卡導航是一個塊(Block)，這個塊裡的元素的是其中標籤之一(Element)，而當前選項卡是一個修飾狀態(Modifier)。

<ul class="menu">
  <li class="menu__item">...</li>
  <li class="menu__item_state_current">...</li>
  <li class="menu__item">...</li>
</ul>

擴充套件閱讀

CCSS (Component CSS)

…an architecture which simplifies the CSS authoring experience for large web applications — Satheesh Kumar

CCSS是一個SMACSS和BEM結合在一起的Sass專案。他可以做為一個樣板或指南，在團隊的下一個專案中使用。

擴充套件閱讀

ACSS (Atomic CSS)

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages. — Brad Frost

考慮如何設計一個系統的介面。原子(Atoms)是建立一個區塊的最基本的特質，比如說表單按鈕。分子(Molecules)是很多個原子(Atoms)的組合，比如說一個表單中包括了一個標籤，輸入框和按鈕。生物(Organisms)是眾多分子(Molecules)的組合物，比如一個網站的頂部區域，他包括了網站的標題、導航等。而模板(Templates)又是眾多生物(Organisms)的結合體。比如一個網站頁面的佈局。而最後的頁面就是特殊的模板。

截官網上的一張圖來說明：

CSS 和 CSS 前處理器簡介

擴充套件閱讀

結論

閱讀這些不同的框架和方法，可以讓你更好的如何定義類名。它也讓我意識到，我這麼多年都是草率的在寫CSS。

今年我打算使用SMACSS，OOCSS和BEM這些方法來寫CSS，並且讓自己元素的命名與Bootstrap框架中常用元件保持更緊密的結合，比如說按鈕，警告資訊，表單元素等。

我最近就是按種思維方式在調自己的框架，其中包括如何組織CSS檔案：

CSS 和 CSS 前處理器簡介

最後我列出一些我將要用到的技巧，並且堅持做下去：

  • 儘量不讓自己的樣式層級超過三層
  • 儘量不使用!important，通過新增和使用類名，比如.hidden類名
  • 儘量遠離Sass中介紹@extend的一般經驗法則——他們有些是迷惑人
  • 儘量在樣式表中新增註釋
  • 讓團隊寫CSS有一個標準規範——Harry Roberts寫了一個很有名的CSS指南
  • 此外，應該有一個可以展示元素樣式的模組庫
  • 使用類似scss-lint工具，讓你的SCSS/CSS和規範保持一致
  • 儘量不要使用*這樣的全域性選擇器
  • JavaScript鉤子是使用的類名，儘量加上字首js-
  • 儘量在專案中重複使用類名和模組
  • 取名儘量和Bootstrap框架的元件接近
  • 在樣式中避免使用#id

注：其實在CSS預處器語言中，除了Sass/SCSS和LESS之外，還有Stylus，而且在Node社群使用較多。另外除了CSS預處理之外，現在還有CSS後處理語言PostCSS,也是值得了解與學習的。

相關文章