Как мне назвать классы CSS?

Как должны быть имена классов?

Например, класс CSS для подсчета голосов, как его называть?

.vote-count-post     (1) // SO uses this
.VoteCountPost       (2)
.voteCountPost       (3)
.vote.count-post     (4)
.vote .count-post    (5)
.vote .count.post    (6)

Каковы преимущества и недостатки каждого?
Что наиболее часто используется и почему?
Есть ли какие-либо последствия для любого из них?
Могу ли я иметь прописные буквы в моем CSS?

Ответ 1

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

Три первых селектора обращаются к одиночным элементам, четвертый - к одному элементу с двумя классами, пятый - к элементу внутри другого, а шестой делает то же самое, но с внутренним ellement, имеющим два класса.

Я бы положил class="Vote" на элемент surronding и вне class="count" на элементе count внутри него, чтобы адресовать его. Я использую pascal case для окружающих элементов и нижний регистр для дочерних элементов внутри них, поэтому я бы использовал:

.Vote .count

Ответ 2

4, 5 и 6 являются специальными

.vote.count-post соответствует элементам с class="vote count-post" или class="count-post vote" или даже class="vote something-else count-post".
.vote .count-post соответствует элементам с class="count-post", которые являются подэлементами элемента с class="vote"
и .vote .count.post - это сочетание этих

Между 1, 2 и 3 все, что имеет значение, - это предпочтение стиля. Некоторые люди предпочитают друг друга так же, как в языках программирования. Так что просто выберите то, что вы лично предпочитаете, или что более подходит для вас.

Ответ 3

Я проголосовал за (1), чтобы всегда использовать строчные буквы для вашего CSS. Таким образом, вам не нужно помнить, где вы капитализируете материал. Таким образом, исключается (2) и (3).

(5) - это действительно два разных элемента, поэтому они не могут применяться к одному элементу.

(4) и (6) недействительны для одного элемента. (4) предполагает, что вы применяете два класса к одному элементу, например class='vote count-post'. (6) представляет собой комбинацию (4) и (5).

Ответ 4

Я вижу первый подход много (jQuery UI. CSS framework использует его, и я нахожу его очень хорошим примером для хорошего CSS).

Мне лично не нравится camelcasing в именах классов из (2) и (3), потому что это действительно легко понять неправильно (просто напишите VotecountPost, и это не сработает).

(4), (5), (6) на самом деле не конвенция, а скорее разные селекторы, как уже указывали другие.

Ответ 5

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

Тем не менее, я также предлагаю добавить префикс для ваших имен класса css. В крупных проектах это помогает быстро определить их источник и то, к чему они относятся. Это также помогает предотвратить столкновение имен (и непредсказуемое поведение) в гетерогенной среде.

Ответ 6

На мой взгляд, нет "правильного" ответа. Я стараюсь делать то, что более читаемо, поэтому я выбираю (3). По-моему, в html/css уже есть текст слова в словосочетании. И при стилизации, например, Wordpress Я думаю, что это как миксер, полный тире, трудно ориентироваться.

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

Ответ 7

Я предлагаю использовать это .VoteCountPost меньше места и читать.

Ответ 8

В моих проектах, использующих jQuery, я определил, что я использую имена классов двумя различными способами. Во-первых, для стилей, где определения почти исключительно в файле .css. Второй - для селекторов jQuery, которые, как правило, изолированы от одной функции и более связаны со сценарием. Из-за этого разделения я выбираю следовать # 1 для стилизации и # 2 для селекторов элементов jQuery. Если кто-то выбирает View Source, теперь они могут определять функции каждого типа класса.