面向對象的CSS

我看着這個presentation about object oriented css，但我想我要麼不正確理解或不理解使用OO CSS的好處：面向對象的CSS

示例HTML：

<div class="border-1 bg-2 color-1 font-1"> 
</div>

範例CSS ：

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */

我看到了能夠快速更改多個元素的樣式的優勢，例如，能夠切換顏色方案將非常有用。

但實際上，您正在定義HTML內的樣式/外觀，或至少是其中的一部分。當然，它比使用style屬性更好，因爲您仍然可以交換一組組的樣式。關鍵是，您正在定義HTML內的樣式組，但我知道您應該在HTML內部創建「邏輯」組（例如class="nav-item"/class="btn submit-btn"），並且CSS完全應用樣式並定義哪些組件從「文體」的角度來看屬於一起（例如.nav-item, .submit-btn { background: red; }）。

也許我完全誤解了這個概念。但是，我仍然不知道構建CSS的好方法。

來源

2011-09-15 fishbone

CSS不是面向對象的。我的建議是忘記你讀過關於「面向對象的CSS」的內容，然後把焦點放在你試圖解決的CSS問題上。如果他們要讓CSS更容易編寫，閱讀和維護，或者獲得更多功能（比如CSS變量），我認爲Less或Sass將更適合您的需求。

像使用「面向對象的CSS」的建議那樣使用CSS只會導致糟糕的，非語義和無意義的CSS，從長遠來看，它比「普通」的CSS更容易維護。 id和class應該有semantic and meaningful names，所以使用允許您編寫語義CSS（描述意圖而不是演示文稿）的框架在我看來更好。

來源

2011-09-15 13:36:50

@madr，你嘗試[更少]（http://lesscss.org/）或[薩斯]（HTTP：/ /sass-lang.com/）？它們比解決這個問題要好得多，而不是試圖將面向對象的東西變成一個永遠不會面向對象的東西。 –

@asbjomu因爲沒有理由不這樣做，所以我將預處理器與OOCSS結合起來，從兩者中獲得最佳效果。我的團隊對這份工作協議感到非常滿意。 – madr

@AsbjørnUlsberg，談到我的經驗，對於不熟悉OOCSS的移動到scss/sass的用戶界面開發人員來說，這將是一件非常不好的事情，主要原因是OOCSS讓開發人員在抽象某個部分CSS作爲一個獨立的組件，如果你不問自己這個問題作爲一個CSS開發人員，那麼轉到SCSS不會對這個人有任何好處！這個原因本身可以節省大量的代碼膨脹！ –

這是更多的「名稱下降」，這是一種實際的方法。您顯示的代碼經常被貶爲「enterprise css」，沒有任何藉口。

更重要的是，元素上有多個類實際上會損害性能。

我建議你在製作CSS時遵守Mozilla's guidelines，這對其他瀏覽器來說也是一樣的。併爲IE6,7和8製作專用的.css文件。

來源

2011-09-15 14:10:19 c69

請參閱說明多個班級被視爲不良應有表現的部分。使用長而不必要的複雜CSS選擇器是AFAIK比使用多個類更差。 http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ – madr

'避免後代選擇器，ID，元素參考，！重要。使用CSS Lint和CSS網格。這是OOCSS？好。精細。沒有錯。非常普遍的智慧。但「面向對象」部分在哪裏？ _編程技術可能包括諸如數據抽象，封裝，消息傳遞，模塊化，多態性和繼承等功能。[[（c）wiki]（http://en.wikipedia.org/wiki/Object-oriented_programming）你應該如何在CSS中封裝任何東西？ CSS甚至沒有變量，'

面向對象的CSS

回答