Какова наилучшая практика для именования и размещения классов и идентификаторов CSS из нескольких слов?

Question

Я пытаюсь выяснить, каков наилучший способ присвоения имен и описания классов и идентификаторов css, особенно имен нескольких слов.

Например, скажем, у меня есть <div>, который я хочу назвать «навыками персонажа». Похоже, есть 3 варианта: "персонажи", "персонажи" или "навыки персонажа".

Какой из этих стандартов является отраслевым стандартом для именования классов и идентификаторов CSS?

Как лучше разбивать несколько слов в именах css?

Также рекомендуется всегда использовать все строчные буквы для имен css, потому что они нечувствительны к регистру?

Answer 1

Я также склонен использовать стиль переносов. Я в основном использую этот стиль, поскольку свойства CSS соответствуют одному и тому же регистру. Точно так же функции и переменные JavaScript имеют тенденцию использовать нижний регистр верблюда. Например, чтобы изменить свойство CSS в JavaScript, вы должны набрать object.style.textDecoration, но в CSS это свойство будет изменено с text-decoration.

Answer 2

Я использую lowerCamel для имен классов и UpperCamel для идентификаторов. Это очень важно, и я бью этот старый ответ, потому что IMO не следует использовать стиль переносов, даже подчеркивание лучше, чем переносы.

Почему? Потому что любой другой язык не может иметь имен переменных через дефис. Например, ваша IDE может или не может правильно подобрать автозаполнение. (Моя IDE не может, это VI: P)

CSS, тесно связанный с JavaScript, дефис-имя класса также затрудняет взаимодействие с JavaScript. Рассмотрим следующий (надуманный) jQuery:

// For each of the following class, perform a function
var funcs = 
{
    main: function(){ /* ... */},
    toolbar: function(){ /* ... */ },

    // Oops, need to use a quote because there's this hyphenated name
    'customer-info': function(){ /* ... */ }
};

// Woot, a O(n^2) function
for(var className in funcs)
{
    var func = funcs[className];
    // maybe if we named it $('#some-selector')? The hyphen suddenly feels 
    // like some kind of operator to me. Makes me nervous :/
    $('#SomeSelector div').each(function()
    {
        if($(this).hasClass(className)) func();
    });
}

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

Правильный (да?) Способ представления пространства подчеркивается. Считайте эту фразу «письмо с собственным адресом», как я могу преобразовать пробелы?

• a_self-address_letter (правильно, сохраняет первоначальное значение)
• a-self-address-letter (ой! Если мы конвертируем его обратно, мы получим «письмо с собственным адресом»!)

Также рекомендуется ли всегда использовать все строчные буквы для имен css, потому что они не чувствительны к регистру?

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

Answer 3

Я лично использую стиль через дефис (т.е. some-class), но вы должны просто выбрать то, что вы считаете лучшим, и быть последовательным. Это чисто вопрос эстетики.

Answer 4

Я часто вижу следующие стили корпуса:

characterSkills, CharacterSkills

Но, в конце концов, не имеет значения, какой стиль вы выбираете. Просто будьте последовательны в своем собственном приложении.

Answer 5

Я рекомендую использовать BEM (модификатор блочного элемента).

Получено с сайта:

БЭМ - Модификатор блочного элемента - это методология, которая помогает вам создавать многократно используемые компоненты и совместное использование кода в интерфейсной разработке.

Для получения более подробной информации, пожалуйста, посетите веб-сайт документации:

http://getbem.com/naming/

Answer 6

Прочитав примеры и сделав свои собственные ошибки, я нашел это решение для себя:

1. Используйте дефисы для отображения иерархии, например #products-MainContent {} или #maincontent-Summary {}. Для меня это означает, что MainContent является дочерним продуктом div.
2. Используйте заглавные буквы после первого элемента в иерархии для идентификаторов. Используйте все строчные буквы для классов, например #summary-Statistics (ID) или .summary-statistics (класс)

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

Answer 7

Я использую lowerCamelCase для классов и UpperCamel для идентификаторов, например:

#HeaderLogo { ... }
.pullQuote { ... }

Но это действительно не имеет никакого значения, если вы последовательны :) О, и попробуйте придерживаться имен классов, состоящих из одного слова, где это возможно - вы всегда можете комбинировать классы, например:

.boxout { border: 1px solid; padding: 10px; }
.emphasised { font-weight: bold; }
.subtle { font-size: small; }

.boxout.emphasised { background: yellow; }
.boxout.subtle { color: gray; }

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

Answer 8

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

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