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

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

Так, например, скажем, у меня есть <div>, который я хочу назвать "навыками персонажа". Кажется, есть 3 варианта: "characterskills", "character_skills" или "character-skills".

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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

characterSkills, CharacterSkills

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

Ответ 5

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

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

Ответ 6

Я использую 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 и уменьшая общее количество классов, которые вы должны помнить при разработке страниц.

Ответ 7

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

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

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