Являются ли классы CSS общего назначения неправильными?

Question

Скажем, у меня есть чище, как это

.cleaner:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;                
}

чтобы я мог добавить очиститель класса ко всему, что я хочу очистить поплавками. Это намного лучший способ, чем добавление

<div style="clear:both;"></div>

вместо этого, потому что он не отделяет дизайн от разметки.

Но хотя этот подход может уменьшить количество дубликатов кода, он также как бы нарушает идею отдельного дизайна, потому что я должен изменить html напрямую.

Можно ли иметь такие классы и добавлять их везде, где это необходимо? Или я должен добавить :after { ... явно ко всему, что я не хочу очищать с плавающей точкой (например, #header: after ..., #menu: after {.... `), что приводит к дублированию кода, но также и к гораздо большему разделению дизайн, где мне не нужно напрямую касаться HTML.

Вероятно, класс общего назначения был бы полезен для javascript, где было бы легче менять стили, но стоит ли дублировать код, чтобы получить эффект отдельного дизайна в чистом HTML / CSS?

Answer 1

Можно ли иметь такие классы и добавлять их везде, где это необходимо?

Да. Я использую его долгое время со многими различными конструкциями и не нашел никаких проблем; -)

Answer 2

Да.

Атрибут class используется для указания того, что элементы, которые совместно используют один и тот же класс, принадлежат группе. Затем вы можете делать вещи с этими группами, используя CSS или Javascript. Элемент может быть частью многих групп, поэтому может иметь много классов.

В вашем примере div принадлежит к группам "элементы, после которых я хочу очистить поплавки", поэтому у каждого элемента в этой группе должен быть класс "уборщик", чтобы указать это CSS.

Прочтите эту статью на "Модульный CSS" , в котором рассказывается о хорошем способе структурирования вашего CSS и классов

Answer 3

Нет действительно хорошего способа очистить макет в полностью независимом от контента решении. Это связано с тем, что CSS является языком стилей и был перегружен для обработки макета (так же, как HTML-таблицы вернулись "в тот день") На самом деле доступного языка компоновки на самом деле не существует (пока), и поэтому мы должны делать то, что имеем.

Мне нравится ваш подход, поскольку он сводит к минимуму дополнительные элементы , что намного более удобно. Однако я не уверен, что IE6 поддерживает псевдоэлемент: after, поэтому действуйте осторожно.

Answer 4

Проблема в том, что CSS плохо спроектирован с точки зрения избежания дублирования. Было бы здорово, если бы мы могли определить группы правил и значений и применить их к определенным селекторам. Таким образом, вы можете избежать дублирования, не добавляя презентационную разметку в ваш HTML. К сожалению, CSS делает это очень трудно сделать правильно.

Ваш подход довольно здравый, но имеет один существенный недостаток: если один и тот же HTML-код предназначен для использования с несколькими таблицами стилей, и некоторые из этих таблиц стилей требуют очистки в разных местах, чем в других, у вас могут возникнуть проблемы с этим подходом. Если ваш HTML-код уже привязан к представлению документа, то этот недостаток не так уж применим.

Редактировать: Забыл упомянуть, что вы можете отказаться от повторения, если ваш CSS генерируется программно. Тогда он может быть настолько многословным и сложным, насколько этого требует CSS, но при этом быть концептуально простым и легким в обслуживании. Недостатком здесь будет увеличение размера загрузки. Это может быть смягчено сжатием.

Answer 5

В таких ситуациях я пытаюсь выяснить, есть ли какая-то базовая абстракция, которую я пропускаю. Есть ли у этих элементов что-то общее с точки зрения структуры? Можете ли вы придумать имя класса, которое связало бы их все вместе и имело бы смысл без CSS?

Если нет, не переживайте из-за обмана. Совершенство - враг добра.