天天看點

CSS 和 CSS 預處理器簡介CSS 和 CSS 預處理器簡介

我已經想了很多關于自己編寫的css,其目前的狀态和這麼多年來是如何改變的。

大多數項目中我都會通常使用“自己”的css,傾向于自己的習慣,将記在腦海中的東西運用到現在的項目中,這對于管理css來說是一件可怕的事情。這讓其他人更難在項目中做出貢獻,也難以維護一個更大的項目,還難以編寫出幹淨的代碼。

bootstrap,bem,smacc和其他的架構與方法,通過實踐證明,最好學使用常用的名給你的元素全名。

<a target="_blank"></a>

CSS 和 CSS 預處理器簡介CSS 和 CSS 預處理器簡介

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

<code>div {</code>

<code>font-size: 14px;</code>

<code>margin: 0 0 20px;</code>

<code>padding: 10px;</code>

<code>}</code>

自從2007年sass誕生以來,對于導入和維護多個樣式表尤其有用。特别是其變量,複用模式和其他強大的特性。

sass(syntactically awesome style sheets)是第一種文法格式。scss(sassy css)是後面出來的一種sass文法,其更類似于css文法。你可能比較喜歡使用scss。到現在,我無法想象在項目中不使用scss,而隻純使用css是怎樣的痛苦。

<code>$primary-color: purple;</code>

<code>ul {</code>

<code>li {</code>

<code>margin-bottom: 20px;</code>

<code>a {</code>

<code>color: $primary-color;</code>

<a href="http://sass-lang.com/" target="_blank">sass官網</a>

<a href="http://sass-guidelin.es/" target="_blank">sass指南</a>

<a href="http://sass.io/" target="_blank">sass項目</a>

<a href="http://www.sache.in/" target="_blank">discover sass &amp; compass extensions</a>

<a href="http://www.w3cplus.com/blog/tags/302.html" target="_blank">sass中文教程</a>

<a href="https://github.com/airen/sass_mixins_function" target="_blank">sass資源連結</a>

compass的mixin非常的友善。對我來說,compass一個最大的特性是,解決了浏覽器字首的問題。不用擔心沒輸入浏覽器字首而引起的浏覽器渲染問題。

<code>@import "compass/css3"</code>

<code>@include border-radius(5px);</code>

<code>@include box-shadow(0 0 10px rgba(0, 0, 0, .1));</code>

compass其實是sass的一個擴充,也可以說是最早使用sass寫的一個擴充(架構),并且是一個開源框 架,其最大的特色就是compass的mixins和functions可以幫助我們做很多事情,不需要了解這些mixins和function實質原理,隻需要了解其怎麼調用就行。這對于初學sass的同學,或使用sass來做項目的同學起到了很大的幫助,而對于想深入學習sass的同學,也提供了一個很好的樣本。

<a href="http://compass-style.org/" target="_blank">compass官網</a>

<a href="https://github.com/compass/compass" target="_blank">compass項目源碼</a>

<a href="http://leveluptuts.com/tutorials/compass-tutorials" target="_blank">compass視訊</a>

less和sass非常類似,不同的是他依賴node(javascript)環境編譯,而不是ruby環境。其實我自己從來沒有使用less做過項目。

<code>@base: #f938ab;</code>

<code>.box-shadow(@style, @c) when (iscolor(@c)) {</code>

<code>-webkit-box-shadow: @style @c;</code>

<code>box-shadow: @style @c;</code>

<code>.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {</code>

<code>.box-shadow(@style, rgba(0, 0, 0, @alpha));</code>

<code>.box {</code>

<code>color: saturate(@base, 5%);</code>

<code>border-color: lighten(@base, 30%);</code>

<code>div { .box-shadow(0 0 5px, 30%) }</code>

<a href="http://lesscss.org/" target="_blank">less官網</a>

<a href="http://lesscss.net/" target="_blank">less官網(中文)</a>

<a href="http://www.imooc.com/learn/102" target="_blank">less即學即用</a>

更高層次是在項目中思考如何重用樣式、模式和抽像子產品。一個子產品應該有一個主修飾符,不應該太具體或太深入,比如<code>.box-heading</code>要比<code>ul li .box-heading</code>更好。

<code>&lt;div class="item"&gt;</code>

<code>&lt;ul class="item-list"&gt;</code>

<code>&lt;li class="item-list--item"&gt;</code>

<code>&lt;h3 class="item-heading"&gt;...</code>

<code></code>

<code>.item {</code>

<code>...</code>

<code>.item-list {</code>

<code>}.item-list--item {</code>

<code>.item-heading {</code>

<a href="http://www.w3cplus.com/blog/tags/284.html" target="_blank">oocss中文資源</a>

<a href="http://appendto.com/2014/04/oocss/" target="_blank">what is oocss?</a>

<a href="http://oocss.org/" target="_blank">object-oriented css</a>

<a href="https://github.com/stubbornella/oocss/wiki" target="_blank">object oriented css</a>

<a href="http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/" target="_blank">an introduction to object oriented css (oocss)</a>

<a href="http://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986" target="_blank">object-oriented css: what, how, and why</a>

<a href="http://philipwalton.com/articles/the-future-of-oocss-a-proposal/" target="_blank">the future of oocss: a proposal</a>

jonathan snook為smaccs寫了一本書。其中最佳實踐就是如何給你的html元素定義一個好的類名。

在整個系列中,包括了base(預設部分),modules(可重用部分),staes(狀态,比如隐藏和目前)和主題(themes)。修飾符使用的是<code>--</code>,子子產品使用<code>__</code>符号。

<code>&lt;div class=“container”&gt;</code>

<code>&lt;div class=“container-header”&gt;</code>

<code>&lt;div class=“container-header__title”&gt;</code>

<code>&lt;h1 class=“container-header__title--home”&gt;</code>

<a href="https://smacss.com/" target="_blank">smacss官網</a>

<a href="http://www.vanseodesign.com/css/smacss-introduction/" target="_blank">an introduction to smacss guidelines for writing css</a>

<a href="http://webdesign.tutsplus.com/courses/introduction-to-smacss" target="_blank">introduction to smacss</a>

和smaccs非常類似,主要用來如何給項目命名。一個簡單命名和容易讓别人一起工作的方法。比如頁籤導航是一個塊(block),這個塊裡的元素的是其中标簽之一(element),而目前頁籤是一個修飾狀态(modifier)。

<code>&lt;ul class="menu"&gt;</code>

<code>&lt;li class="menu__item"&gt;...&lt;/li&gt;</code>

<code>&lt;li class="menu__item_state_current"&gt;...&lt;/li&gt;</code>

<code>&lt;/ul&gt;</code>

<a href="http://www.w3cplus.com/blog/tags/325.html" target="_blank">bem中文資源</a>

<a href="https://bem.info/" target="_blank">bem官網</a>

<a href="http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/" target="_blank">a new front-end methodology: bem</a>

<a href="http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403" target="_blank">an introduction to the bem methodology</a>

<a href="http://www.mathayward.com/modular-css-with-sass-and-bem/" target="_blank">modular css with sass &amp; bem</a>

ccss是一個smacss和bem結合在一起的sass項目。他可以做為一個樣闆或指南,在團隊的下一個項目中使用。

<a href="https://github.com/sathify/ccss" target="_blank">ccss</a>

<a href="http://www.sitepoint.com/introducing-ccss-component-css/" target="_blank">introducing ccss (component css)</a>

考慮如何設計一個系統的接口。原子(atoms)是建立一個區塊的最基本的特質,比如說表單按鈕。分子(molecules)是很多個原子(atoms)的組合,比如說一個表單中包括了一個标簽,輸入框和按鈕。生物(organisms)是衆多分子(molecules)的組合物,比如一個網站的頂部區域,他包括了網站的标題、導航等。而模闆(templates)又是衆多生物(organisms)的結合體。比如一個網站頁面的布局。而最後的頁面就是特殊的模闆。

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

CSS 和 CSS 預處理器簡介CSS 和 CSS 預處理器簡介

atomic css

<a href="http://patternlab.io/" target="_blank">acss官網</a>

<a href="http://bradfrost.com/blog/post/atomic-web-design/" target="_blank">atomic design</a>

<a href="https://www.lucidchart.com/techblog/2014/01/31/atomic-css-tool-set/" target="_blank">atomic css as a tool set</a>

<a href="http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/" target="_blank">challenging css best practices</a>

<a href="http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/" target="_blank">the “other” interface: atomic design with sass</a>

<a href="http://www.phase2technology.com/blog/your-frontend-methodology-is-all-of-them-atomic-design-patternlab/" target="_blank">your frontend methodology is all of them: atomic design &amp; pattern lab</a>

<a href="http://www.slideshare.net/renatoiwa/acss" target="_blank">acss: rethinking css best practices</a>

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

今年我打算使用smacss,oocss和bem這些方法來寫css,并且讓自己元素的命名與bootstrap架構中常用元件保持更緊密的結合,比如說按鈕,警告資訊,表單元素等。

CSS 和 CSS 預處理器簡介CSS 和 CSS 預處理器簡介

css檔案結構

最後我列出一些我将要用到的技巧,并且堅持做下去:

盡量不讓自己的樣式層級超過三層

盡量不使用<code>!important</code>,通過添加和使用類名,比如<code>.hidden</code>類名

盡量遠離sass中介紹<code>@extend</code>的一般經驗法則——他們有些是迷惑人

盡量在樣式表中添加注釋

此外,應該有一個可以展示元素樣式的子產品庫

盡量不要使用<code>*</code>這樣的全局選擇器

javascript鈎子是使用的類名,盡量加上字首<code>js-</code>

盡量在項目中重複使用類名和子產品

取名盡量和bootstrap架構的元件接近

在樣式中避免使用<code>#id</code>

原文釋出時間:2015-04-06

本文來自雲栖合作夥伴“linux中國”

繼續閱讀