資訊專(zhuān)欄INFORMATION COLUMN
摘要：自從年提出以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的代碼方式之一。換句話(huà)說(shuō)，你的樣式中盡量不要使用標(biāo)簽或者標(biāo)識(shí)符。我們必須使用來(lái)創(chuàng)建對(duì)象，通過(guò)在類(lèi)中調(diào)用，將其合在一起。如果你不在刻意在中追求語(yǔ)義化，你仍然可以使用。
自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng)，用來(lái)組織你的CSS代碼方式之一。
OOCSS不同于其他組織CSS代碼方法，比如SMACSS或者BEM。通過(guò)將CSS代碼和結(jié)構(gòu)分離讓你的模塊可重用。事實(shí)上，我也通常將SMACSS與OOCSS混為一談。其實(shí)John W. Long在The Sass Way上面寫(xiě)了很多篇有關(guān)于CSS模塊化的教程。
OOCSS、SMACC和BEM在CSS中是很有內(nèi)涵的東東，早就在W3cplus站點(diǎn)上有相關(guān)內(nèi)容科普過(guò)。可以說(shuō)理解了這些內(nèi)容將能更好的幫助您組織、管理您的CSS代碼或者說(shuō)CSS模塊。
今天，我要和大家一起探討的是OOCSS的一些基本原則。主要跟大家一起探討的是如何將Sass和OOCSS更好結(jié)合在一起的一些建議。
什么是對(duì)象？在視覺(jué)是這是一個(gè)重復(fù)的模塊，可以將HTML、CSS和JavaSctrip獨(dú)立抽取出來(lái)，成為一個(gè)獨(dú)立的片段——Nicole Sullivan
將一個(gè)CSS對(duì)象抽取出來(lái)要考慮的第一件事情就是怎么將樣式與結(jié)構(gòu)分離出來(lái)，組織代碼的最佳方式是什么？OOCSS的創(chuàng)始人Nicole Sllivan提了兩個(gè)主要原則：
結(jié)構(gòu)與樣式分離：你應(yīng)該在對(duì)象中定義結(jié)構(gòu)和位置，而對(duì)于樣式特性應(yīng)該使用類(lèi)名分離出來(lái)，比如說(shuō)background或border。這樣一來(lái)你就不需要去覆蓋一些特征性樣式。
容器與內(nèi)容分離：不要在你的HTML結(jié)構(gòu)中插入樣式。換句話(huà)說(shuō)，你的樣式中盡量不要使用html標(biāo)簽或者id標(biāo)識(shí)符。相反，應(yīng)該定義一些類(lèi)名來(lái)定義樣式，而且選擇器的嵌套的層級(jí)應(yīng)該盡量的少。
我們快速做一個(gè)示例運(yùn)用這些原則可能比較困難（理解理論的東西總是蛋疼的）。讓我們來(lái)看一個(gè)簡(jiǎn)單的實(shí)例，看看是如何組織這樣的代碼:
/* 不好的方式 */
.box-1 {
border: 1px solid #ccc;
width: 200px;
height: 200px;
border-radius: 10px;
}
.box-2 {
border: 1px solid #ccc;
width: 120px;
height: 120px
border-radius: 10px;
}
你不難發(fā)現(xiàn)，有一些重復(fù)的樣式出現(xiàn)。在這個(gè)例子中，border樣式在兩個(gè)類(lèi)中都定義了。如果你想改變border-radius或border屬性值時(shí)，不得不在兩個(gè)地方修改。
為了解決這個(gè)問(wèn)題，把這個(gè)樣式放在另一個(gè)新增加的類(lèi)名中：
/* 好的方式 */
.box-1 {
width: 200px;
height: 200px;
}
.box-2 {
width: 120px;
height: 120px;
}
.box-border{
border: 1px solid #CCC;
border-radius: 10px;
}
在HTML結(jié)構(gòu)中，我們可以這樣使用：
語(yǔ)義化和維護(hù)Lorem ipsumLorem ipsum
你在意沒(méi)有語(yǔ)義化，而我更關(guān)心的是代碼的維護(hù)。比如說(shuō)這個(gè)示例所示。
純CSS來(lái)定義對(duì)象就沒(méi)有語(yǔ)義化，但這樣就存在一些問(wèn)題:
每次改為樣式風(fēng)格時(shí)，都需要修改HTML
沒(méi)有一種安全的方式來(lái)訪問(wèn)DOM元素
對(duì)于OOCSS來(lái)說(shuō)，除了維護(hù)HTML比較困難之外，其他都是很完美的。我們的CSS很容易擴(kuò)展，也非常方便用于新的內(nèi)容中。
因此我們寫(xiě)了部分CSS代碼用于在HTML結(jié)構(gòu)中進(jìn)行擴(kuò)展。這樣的方式真的會(huì)變得更好？
Sass的到來(lái)我可以肯定你肯定聽(tīng)過(guò)Sass的@extend命令和了解他是如何工作的。因此，要非常感謝選擇器的占位符%placeholder，在Sass中可以通過(guò)@extend來(lái)擴(kuò)展，如此一來(lái)在CSS就是可以創(chuàng)建一些有語(yǔ)義化的類(lèi)名，也解決了HTML中的存在的問(wèn)題。
我們必須使用%placeholder來(lái)創(chuàng)建對(duì)象，通過(guò)@extend在類(lèi)中調(diào)用，將其合在一起。這樣就可以自己組織代碼：
/* 不好的方式 */
a.twitter {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #55acee
color: #fff;
}
span.facebook {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #3b5998;
color: #fff;
}
所有的對(duì)象都使用@extend和基本對(duì)象混合在一起，這樣就可以得到一個(gè)干凈的CSS對(duì)象，在Sass中是十分容易的事情，我們也不必要再花時(shí)間來(lái)修改HTML。
/* 好的方式 */
%button {
min-width: 100px;
padding: 1em;
border-radius: 1em;
}
%twitter-background {
color: #fff;
background: #55acee;
}
%facebook-background {
color: #fff;
background: #3b5998;
}
.btn {
&--twitter {
@extend %button;
@extend %twitter-background;
}
&--facebook {
@extend %button;
@extend %facebook-background;
}
}
具有語(yǔ)義化了，完美？Sass解決了我們的總是。記?。?b>@extend讓你的HTML保持最干凈，而且又具有語(yǔ)義化，這在Sass中是件十分容易的事情。
我喜歡把其稱(chēng)為OOSass，因?yàn)樗荗OCSS和Sass的混合物。當(dāng)然，你不必使用它。如果你不在刻意在HTML中追求語(yǔ)義化，你仍然可以使用OOCSS。每個(gè)人都有自己的方式，那么你又是如何構(gòu)建你自己的CSS呢？請(qǐng)與我們一起分享。
英文原文
via cn-sass.com
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110983.html
摘要：這個(gè)方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過(guò)把命名為表示其角色的類(lèi)名。通過(guò)使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復(fù)雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。 其中一個(gè)原因是CSS缺少內(nèi)置的作用域管理機(jī)制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...
摘要：這個(gè)方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過(guò)把命名為表示其角色的類(lèi)名。通過(guò)使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復(fù)雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。 其中一個(gè)原因是CSS缺少內(nèi)置的作用域管理機(jī)制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...
摘要：在規(guī)則聲明的左大括號(hào)前加上一個(gè)空格。規(guī)則聲明之間用空行分隔開(kāi)。根據(jù)屬性的重要性順序書(shū)寫(xiě)。因此私有在前，標(biāo)準(zhǔn)在后的寫(xiě)法是考慮到了以后可能會(huì)出現(xiàn)的問(wèn)題。且最好盡量減少?zèng)]有實(shí)際作用的冗余的屬性。 https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....htt...
摘要：為什么說(shuō)最佳實(shí)踐是呢簡(jiǎn)單來(lái)說(shuō)，就是這類(lèi)預(yù)處理器在提供一定的抽象能力的同時(shí)，也不會(huì)破壞自身的特性。就語(yǔ)義化這件事情而言，如果你的是基于標(biāo)準(zhǔn)來(lái)編寫(xiě)的，意味著你的頁(yè)面具備更多的可能性。 原文：https://github.com/kuitos/kuitos.github.io/issues/33 15年年末寫(xiě)了篇關(guān)于BEM方法論(實(shí)踐上內(nèi)容并不是原BEM)的文章，文末給自己挖了個(gè)坑說(shuō)要聊聊w...
摘要：，字面意思是面向?qū)ο蟮?，是由提出的理論，其主要的兩個(gè)原則是分離結(jié)構(gòu)和主題分離容器和內(nèi)容用一個(gè)例子來(lái)說(shuō)明。分離容器和內(nèi)容要求使頁(yè)面元素不依賴(lài)于其所處位置。命名規(guī)則不需要嚴(yán)格遵守，可以根據(jù)實(shí)際情況和自身喜好做其他的約定。 最近在The Sass Way[]一文，發(fā)現(xiàn)文章在開(kāi)頭部分就提到了OOCSS、 SMACSS、 BEM、這3個(gè)詞。如果還不知道這些是什么，請(qǐng)先不要繼續(xù)看下去，聯(lián)想到作者這...
閱讀 2280·2023-04-26 03:06
閱讀 3697·2023-04-26 01:51
閱讀 2154·2021-11-24 09:38
閱讀 2569·2021-11-17 17:00
閱讀 2421·2021-09-28 09:36
閱讀 1007·2021-09-24 09:47
閱讀 2678·2019-08-30 15:54
閱讀 1621·2019-08-30 15:44
