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

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

characterSkills, CharacterSkills

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

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

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

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

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

Я использую 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'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, потому что он улучшает читаемость.