DIV CSS 佈局教程網

我們一直以來都是SMACSS的忠實粉絲，然而一個純SMacSS方法最適合於一個全新的項目中的普通CSS。我們的市場網站，我們使用了Sass編寫樣式，而且裡面還有好幾年的CSS遺留物。

我們最近在精減我們的CSS，讓我們的團隊更方便的維護，而在精減過程中，我們團隊並沒有扔掉我們現有的樣式或者從零開始。

我們基於SMACSS方法著手解決SMacSS和OOCSS的問題，但從BEM和Toadstool我們也有一些修改和一些想法。

注意：你將需要對SMACSS有點了解，如果你不了解，可以點擊這裡。

SMACSS的呈現

SMACSS定義了五種樣式類型：

• Base (基本)
• Layout（布局）
• Module (模塊)
• State (狀態)
• Theme (皮膚)

我們的方法看起來像這樣：

• Base (基本)
• Layout(布局)
• Module(模塊)
• State(狀態)
• Theme(皮膚)

Base(基本)

在新項目中我們的基本樣式僅僅使用了Normalize，用來重置元素的基本樣式(顏色、排版、外距和內距等)。

不幸的是，在線上的基本CSS來自一個時間相當久的CSS重置，裡面有一些默認字體樣式幾乎都覆蓋了。多年來，這些樣式都放置在頂部，難以改變不影響其他所有的樣式。

即使有這些缺點，我們仍然可以修改我們的基本樣式，就像SMACSS的基本樣式。

Layout(布局)

在我們的方法中不是基本樣式和全局的類名而是模塊。

SAMCSS規劃了主要布局組件(如，頁頭header，側欄sidebar，網格grid等等)和其他的一切。我們發現這種區別有幾個不必要的因素：

• 模塊通常用展示他們的子組件，同樣的方式主要的組件展示在頁面上。
• 即使我們100%確定組件將永過不會被重用，因此和可重用的組件相比沒有任何好處。

布局和模塊之間的界線太模糊了，布局做為一種特殊的類別保留下來是很價值的。

Module(模塊)

模塊是獨立的，可重用的組件，哪怕是不知道它們的父容器。他們唯一的依賴關系是應用基本樣式。當它不在需要時，我們可以安全的刪除模塊，而不什麼影響我們的CSS。

BEM雙下劃線語法用於一個模塊的子組件范圍中，我們使用CSS子選擇器隨意適合深度的適用性。

BEM雙連字符語法作為修飾符來表示子類，或和關鍵字is-、模塊的具體狀態相結合。

因為設置模塊的寬度width，定位position，外距margin都需要上下文出現的相關因素，我們的模塊要麼是全屏的塊元素要麼是內聯元素。

這裡有一個示例（modules/_my_module.sCSS）：

.my-module { background-color: maroon; position: relative; > a { color: aqua; } } .my-module--important { @extend .my-module; border: 3px solid fuchsia; } .my-module--is-active { background-color:red; } .my-module__close-button {     position: absolute;     right:
			0;     top:
			0; } 

當我第一次開始寫模塊就像這樣，我最終使用很復雜的類來定義模塊的名字：.my-module__child-component__grandchild-component--modifIEr。

但除了position和尺寸相關屬性外，大多數子組件可以提取出自己獨立的模塊。所以如果你離開定位到父元素，我們可以設置為三個小的、獨立的模塊。

modules/_my_module.sCSS:

.my-module { //... } .my-module__child-component { width: 100px; }

modules/_child_component.sCSS:

.child-component { //... } .child-component__grandchild-component { position: absolute; top: 10px; }

modules/_grandchild-component.sCSS:

.grandchild-component { //... } .grandchild-component--modifIEr { //... }

example.Html:

<div class="my-module"> <div class="my-module__child-component"> <div class="child-component"> <div class="child-component__grandchild-component"> <div class="grandchild-component--modifIEr"></div>
			</div>
			</div>
			</div>
			</div>
		

.grandchild-component和.child-component獨立於他們的父容器。這個模塊是用於他的子容器定位。這樣做好處是嵌套的UI組件彼此完全脫離。

State(狀態)

模塊的具體狀態作為模塊的本身被定義在相同的文件中(如上面的.my-module--is-active)，但我們要保持全局狀態類的分離，如.is-hidden。

Theme(皮膚)

我們為各個模板市場寫theme（如ThemeForest和GraphicRiver制作各作皮膚），但我們通過在一個配置文件中設置變量的設置來實現站點的特定風格。

Sass將一切整合

Configuration(配置)

application.sCSS第一個導入的樣式文件就是_config.sCSS。在這裡，我們設置了全局變量，共同使用。這裡包括顏色、字體大小、字體、響應式斷點等等。

我們還包括市場特定的配置文件，用來設置為每個市場的配色文案的變量。

Mixins(混合)

所有的Mixin保存在自己的文件中並放置在一個叫mixins的目錄中，和全局都可以使用。我們也導入了處理浏覽器供應商前綴的Mixin庫，如Compass的Sprites圖和供應商前綴。

Grid(網格)

我們的網格框架只是一個模塊。

我們避開在Html中使用類似於span-5這樣的網格類名，相反使用Susy這種基於列寬而又獨立於模塊的類名。

modules/_page.sCSS:

.page { //... } .page__sidebar { @include span-columns(3,12); } .page__content { @include span-columns(9 omega,12); }

在模塊中.grid只是包含所有東西，他只是Susy網格容器。

Internet Explorer

我們仍然支持IE7和IE8。我們過去使用Html5 Boilerplate方法來處理那些浏覽器兼容，但這意味著我們要使用很多.lt-IE8這樣的類名來處理兼容。

現在我們使用這樣的技巧來為那些浏覽器生成獨立的application-IE8.CSS和application-IE7.CSS樣式。

IE指定的樣式就寫在模塊中。

modules/_my_module.sCSS:

.my-module { color: chartreuse; @if $IE7 { position: relative; zoom:1; } }

給好的浏覽器提供了一個簡潔的application.CSS，裡面沒用任何IE垃圾代碼，相反老IE用戶會得到他們自己的特殊版本。

我們不能做什麼

我們不追求可讀的CSS輸出。當你像這樣寫模塊，可以查看類名和直接選擇正確的Sass文件而不是通過開發者工具試圖找出一個特定的樣式。Source Maps也一樣。

我們不打算從我們編譯的CSS中刪除每一個重復點。我們想要開發盡可能的容易，而又不影響性能。到目前為止用mixins模塊代替@extend，這樣並不會增加原始文件大小。

結論

開始幾個月，我們將模塊的文件放到有點亂的stylesheets目錄。當我們添加新的特性和轉換現有的特性，我們的modules目錄下的樣式文件只增不減。

來自ThemeForest的主要樣式文件application.sCSS，現在看起來像這樣：

// Config @import config_global; @import config_themeforest;// Vendor mixin librarIEs
			@import compass; @import susy;  // Our mixins
			@import mixins/**/*; // Old crud. Our base styles, plus everything else that will eventually // be converted into modules. @import old_stuff/**/*;  // Modules
			@import modules/**/*; // Global state classes @import state;

我們可以成功的實現現代化的CSS架構，而沒有仍掉我們現有的樣式或從零開始。

擴展閱讀

• 對於這個方法，樣式主要參考於starter項目，嘗試一下，讓我們知道您的想法
• 如果你從未了解過SMacSS，你可以到smaCSS.com了解更多的相關介紹
• Harry Roberts有一系列文章關於介紹可伸縮的CSS。從BEM語法介紹開始和工作方式介紹
• Nicolas Gallagher在這個方面也有很多優秀的分享,關於Html語義和前端架構一文就是一個很好的思想概述，讓我們受益不淺。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請注明出處：

英文原文：http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smaCSS/

中文譯文：http://www.w3cplus.com/preprocessor/how-to-scale-and-maintain-legacy-css-with-sass-and-smaCSS.Html