CSS 和 CSS 預處理器簡介

jopen 9年前發布 | 37K 次閱讀 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,也是值得了解與學習的。

原文：http://www.leemunroe.com/css/ 作者： Lee Munroe
譯文：http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html 譯者：大漠

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1428455566026.html

CSS 前端技術

CSS 和 CSS 預處理器簡介

CSS (Cascading Style Sheets)

Sass/SCSS (Syntactically Awesome Style Sheets)

擴展閱讀

Compass

擴展閱讀

Less

擴展閱讀

OOCSS (Object Oriented CSS)

擴展閱讀

SMACCS (Scalable and Modular Architecture for CSS)

擴展閱讀

BEM (Block, Element, Modifier)

擴展閱讀

CCSS (Component CSS)

擴展閱讀

ACSS (Atomic CSS)

擴展閱讀

結論

相關經驗

相關資訊

相關文檔

目錄