使用Sass來寫OOCSS

Carl 發布于2019-08-28 18:03 / 844人閱讀

摘要：自從年提出以來。它就成為一個領先的模塊系統，用來組織你的代碼方式之一。換句話說，你的樣式中盡量不要使用標簽或者標識符。我們必須使用來創建對象，通過在類中調用，將其合在一起。如果你不在刻意在中追求語義化，你仍然可以使用。

自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來。它就成為一個領先的模塊系統，用來組織你的CSS代碼方式之一。

OOCSS不同于其他組織CSS代碼方法，比如SMACSS或者BEM。通過將CSS代碼和結構分離讓你的模塊可重用。事實上，我也通常將SMACSS與OOCSS混為一談。其實John W. Long在The Sass Way上面寫了很多篇有關于CSS模塊化的教程。

OOCSS、SMACC和BEM在CSS中是很有內涵的東東，早就在W3cplus站點上有相關內容科普過。可以說理解了這些內容將能更好的幫助您組織、管理您的CSS代碼或者說CSS模塊。

今天，我要和大家一起探討的是OOCSS的一些基本原則。主要跟大家一起探討的是如何將Sass和OOCSS更好結合在一起的一些建議。

什么是對象？

在視覺是這是一個重復的模塊，可以將HTML、CSS和JavaSctrip獨立抽取出來，成為一個獨立的片段——Nicole Sullivan

將一個CSS對象抽取出來要考慮的第一件事情就是怎么將樣式與結構分離出來，組織代碼的最佳方式是什么？OOCSS的創始人Nicole Sllivan提了兩個主要原則：

結構與樣式分離：你應該在對象中定義結構和位置，而對于樣式特性應該使用類名分離出來，比如說background或border。這樣一來你就不需要去覆蓋一些特征性樣式。

容器與內容分離：不要在你的HTML結構中插入樣式。換句話說，你的樣式中盡量不要使用html標簽或者id標識符。相反，應該定義一些類名來定義樣式，而且選擇器的嵌套的層級應該盡量的少。

我們快速做一個示例

運用這些原則可能比較困難（理解理論的東西總是蛋疼的）。讓我們來看一個簡單的實例，看看是如何組織這樣的代碼:

/* 不好的方式 */
.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;
}

你不難發現，有一些重復的樣式出現。在這個例子中，border樣式在兩個類中都定義了。如果你想改變border-radius或border屬性值時，不得不在兩個地方修改。

為了解決這個問題，把這個樣式放在另一個新增加的類名中：

/* 好的方式 */
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}

在HTML結構中，我們可以這樣使用：

Lorem ipsum
Lorem ipsum

語義化和維護

你在意沒有語義化，而我更關心的是代碼的維護。比如說這個示例所示。

純CSS來定義對象就沒有語義化，但這樣就存在一些問題:

每次改為樣式風格時，都需要修改HTML

沒有一種安全的方式來訪問DOM元素

對于OOCSS來說，除了維護HTML比較困難之外，其他都是很完美的。我們的CSS很容易擴展，也非常方便用于新的內容中。

因此我們寫了部分CSS代碼用于在HTML結構中進行擴展。這樣的方式真的會變得更好？

Sass的到來

我可以肯定你肯定聽過Sass的@extend命令和了解他是如何工作的。因此，要非常感謝選擇器的占位符%placeholder，在Sass中可以通過@extend來擴展，如此一來在CSS就是可以創建一些有語義化的類名，也解決了HTML中的存在的問題。

我們必須使用%placeholder來創建對象，通過@extend在類中調用，將其合在一起。這樣就可以自己組織代碼：

/* 不好的方式 */
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;
}

所有的對象都使用@extend和基本對象混合在一起，這樣就可以得到一個干凈的CSS對象，在Sass中是十分容易的事情，我們也不必要再花時間來修改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;
  }
}

具有語義化了，完美？Sass解決了我們的總是。記住：@extend讓你的HTML保持最干凈，而且又具有語義化，這在Sass中是件十分容易的事情。

我喜歡把其稱為OOSass，因為他是OOCSS和Sass的混合物。當然，你不必使用它。如果你不在刻意在HTML中追求語義化，你仍然可以使用OOCSS。每個人都有自己的方式，那么你又是如何構建你自己的CSS呢？請與我們一起分享。

英文原文
via cn-sass.com

GPU云服務器云服務器 OOCSS 來寫 sass 多云管理 sass

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110983.html

[譯]聊一聊CSS方法論

摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

CoffeX 2019-08-28 18:20 評論0 收藏0
[譯]聊一聊CSS方法論

摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

cfanr 2019-08-01 14:53 評論0 收藏0
優雅地寫css

摘要：在規則聲明的左大括號前加上一個空格。規則聲明之間用空行分隔開。根據屬性的重要性順序書寫。因此私有在前，標準在后的寫法是考慮到了以后可能會出現的問題。且最好盡量減少沒有實際作用的冗余的屬性。 https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....htt...

Kyxy 2019-08-29 14:06 評論0 收藏0
Web語義化標準解讀

摘要：為什么說最佳實踐是呢簡單來說，就是這類預處理器在提供一定的抽象能力的同時，也不會破壞自身的特性。就語義化這件事情而言，如果你的是基于標準來編寫的，意味著你的頁面具備更多的可能性。原文：https://github.com/kuitos/kuitos.github.io/issues/33 15年年末寫了篇關于BEM方法論(實踐上內容并不是原BEM)的文章，文末給自己挖了個坑說要聊聊w...

vspiders 2019-08-30 12:48 評論0 收藏0
值得參考的css理論：OOCSS、SMACSS與BEM

摘要：，字面意思是面向對象的，是由提出的理論，其主要的兩個原則是分離結構和主題分離容器和內容用一個例子來說明。分離容器和內容要求使頁面元素不依賴于其所處位置。命名規則不需要嚴格遵守，可以根據實際情況和自身喜好做其他的約定。最近在The Sass Way[]一文，發現文章在開頭部分就提到了OOCSS、 SMACSS、 BEM、這3個詞。如果還不知道這些是什么，請先不要繼續看下去，聯想到作者這...

馬忠志 2019-08-28 17:59 評論0 收藏0