Лучшие практики CSS для нескольких классов или групповых классов

Question

Я новичок в CSS / CSS3, и я во многих местах читал различные способы создания CSS-файлов.Некоторые люди используют теги в одних и тех же элементах, а некоторые разделяют элементы, а затем используют разные классы в коде HTML.Например:

// css

h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }

, поэтому в HTML их просто нужно вставить и все.Если вам нужно изменить цвет границы, то вам нужно изменить ВСЕ теги с границей внизу.

ИЛИ

h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }

и в используемом HTML:

<h1 class="black headers borderBottom">h1</h1>

Очень просто, но каждый раз, когда вам нужно поместить весь необходимый вам CSS

Есть ли рекомендации по созданию CSS?Какой способ лучше для производительности или времени загрузки?

Answer 1

Рекомендую использовать:

h1, h2 {
    color: black;
    margin: 1em 0;
    padding: 0;
    border-bottom: solid 0.1em #ddd;
}
h1 {
    font: normal 20px Arial;
}
h2 {
    font: normal 16px Arial;
}

Лучшая практика: держите код читабельным. Читабельность не достигается разделением определения стиля на несколько бесполезных классов.

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

Answer 2

Я думаю, что обе техники полезны.Лично я часто ставлю два или более классов, когда мне нужно отделить один элемент от другого (пример, последний в строке элемент не должен содержать margin-right), мой код выглядит так:1006 * CSS:

.image-item {
    border:1px solid red;
    margin-right:20px;
    width:200px;
    height:200px;
}

.image-item.last-in-row {
    margin-right:0;
}

(хорошо поддерживается в IE> 7 и других хороших браузерах).Это решение делает код достаточно чистым, а также позволяет меньше писать (мне не нужно переписывать все стили для последнего элемента или добавлять отдельные селекторы).Обработка элементов jQuery менее запутанна (мне нужен только один селектор, чтобы соответствовать всем .image-items).