我应该在CSS主题中使用OOCSS吗？

Question

我很久以前就听说过中央支助厅，但从来没有真正调查过。今天我这样做了，我想到了将OOCSS应用于一个简单的CSS主题的含义。我想到的一个问题是，从本质上讲，OOCSS鼓励DRYness，从而鼓励使用许多应该由HTML应用于元素的简洁类。作为一个CSS主题，我假设它不够重要，开发人员在编写HTML时会想方设法向它们的元素添加特定的类：

<button class="blue rounded no-border $etc">Button</button>

相对于：

<button>Button</button>

也许HTML开发人员可以编写额外的代码，尽管似乎HTML端重复的代码与没有OOCSS的代码一样多。那么，OOCSS不是一个适合编写CSS代码的通用方法吗，如本例所示？还是我没有正确地理解事物？

Answer 1

我认为OOCSS是一个反模式，它不提供关注点的明确分离(html与css)，也不为您提供语义html或css。

关注点的分离在于HTML与文档的结构有关，而CSS则关注文档的显示方式。

<button class="green rounded no-border">Save</button>
<button class="grey rounded no-border">Cancel</button>

使用以下css：

.green { 
    color: #0f0; 
}

.grey { 
    color: #777; 
}

.rounded { 
    border-radius: 5px; 
}

.no-border { 
    border: none; 
}

使用HTML文档指示保存按钮应该是绿色的(而不是CSS告诉它的)，这违反了关注点的这种分离。

虽然OOCSS旨在减少您编写的代码量，但它最终不得不声明许多类(而不是语义类)，从而成为维护的噩梦。假设稍后您希望所有保存按钮都是蓝色的，您是要将绿色类更改为蓝色，还是要在所有源文件中执行ctrl+f并将文本绿色更新为蓝色？

在保留语义HTML / CSS的同时引入可重用性的一个好方法是使用CSS编译器(例如less.js )。

<button class="primary-action">Save</button>
<button class="cancel-action">Cancel</button>

使用以下less.js：

/* these are reusable variables */
@primary-action-color: #0f0;
@cancel-action-color: #777;

/* this is a re-usable "mixin" */
.rounded() { 
    border-radius: 5px; 
}

button {
    border: none;
    .rounded;

    .primary-action {
        color: @primary-action-color;
    }

    .cancel-action {
        color: @cancel-action-color;
    }
}

虽然最初的代码更多，但是当您开始重用这些变量/混合时，您将能够从语义HTML和有组织的CSS中获益。例如，由于cancel-action有一个很好的有意义的名称，所以您已经可以向您的应用程序添加有意义的功能。例如，下面的jQuery。

$("button.cancel-action").click(function(e){
    if (!confirm('are you sure you want to cancel?')) {
        e.preventDefault();
    }
});