Блог

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

Например, класс 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?

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 все, что имеет значение, — это предпочтение стиля. Некоторые люди предпочитают один другому так же, как и в языках программирования. Поэтому просто выберите то, что вам лично больше нравится, или то, что вам больше подходит.

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

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

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

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

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

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

 .Vote .count
  

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

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

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

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

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

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

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

я предлагаю использовать это .VoteCountPost как можно меньше места и удобочитаемо..

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