Нужна помощь в понимании того, как я должен определять oocss объекты и скины

Question

Прежде чем задать вопрос, вот код, на который я ссылаюсь:

Коробка Объект

Используется для блокировки контента, такого как Остров или Островок в Bootstrap.

.box { margin-bottom: 24px; padding: 12px; }    
.box--s { padding: 8px 12px; }  
.box--l { padding: 24px 12px; }

Круглая кожа

Делает закругленные углы. Он используется несколькими классами абстракции, такими как box.

.round { border-radius: 4px; }  
.round--s { border-radius:2px; }    
.round--l { border-radius:8px; }

В коде для создания абстракции вы должны написать:

<div class="round box">  Example </div>

У меня есть другие скины, которые расширяют рамки, такие как серый, предупреждение и метка.

---

Теперь к вопросу

Я работаю над кнопкой объекта. Но так как он имеет те же правила и модификаторы, что и box, и может иметь такие же модификаторы round, я должен просто объявить его скином? Все, что нужно сделать, это добавить около четырех правил для "внешнего вида". Если бы он портился с полями или отступами, я бы сказал, что это ДОЛЖЕН быть объект.

В коде вы бы написали

<a class="round btn box">  Example </a>

Или уменьшить его размер

<a class="round btn box box--s">  Example </a>

Сохраняет ли это сухим излишним? Что меня беспокоит, так это то, что кнопка - это такой общий элемент на странице, но на самом деле это просто расширение объекта и модификаторы, которые я уже написал.

Answer 1

Все это сводится к вопросу, должны ли мы иметь глобальные модификаторы (такие как.round, .box) или нет. Что касается меня, у них настолько мало семантики, что я предпочитаю всегда интегрировать их в отдельные объекты. Глобальные вещи, такие как ".hidden", ".round" или ".green", не должны использоваться в качестве отдельных объектов.

Поэтому я предпочел бы иметь объект "кнопка", который семантически не совпадает с "коробкой". Все модификации этой кнопки будут неотъемлемой частью этой кнопки, а не некоторых глобальных классов. Если вам нужно сделать вещи круглыми, используйте модификаторы для определенных объектов; для объединения значений у вас всегда есть свой CSS-препроцессор, который не обязательно должен быть представлен на семантическом (то есть на основе имени класса) уровне.

Кстати, это полностью мое личное мнение.