CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?

我已經想了很多關於自己編寫的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入門簡單，深入就比較難。可謂是，樣式簡單，但難以維護。需要考慮大量的樣式，覆蓋、權重和很多!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。

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

我最近就是按種思維方式在調自己的框架，其中包括如何組織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,也是值得了解與學習的。

本文根據Lee Munroe的《CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://www.leemunroe.com/css/。

大漠

常用暱稱“大漠”，W3CPlus,Sass中國創始人，目前就職於Ctrip UED。中國Drupal社區核心成員之一。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國佈道者。2014年出版《圖解CSS3：核心技術與案例實戰》。

如需轉載，煩請註明出處：http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html

CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?

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)

擴展閱讀

結論

大漠

tomcat啓動了但是訪問不了8080

centos+nginx從零開始配置負載均衡

Java的IO流解析

nginx入門

CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結