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

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

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

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

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

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

Источник

8 ответов

Решение

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

Источник

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

Источник

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

Источник

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

CharacterSkills, CharacterSkills

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

Источник

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

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

Источник

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

#Логотип заголовка { ... }
.pullQuote { ... }

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

.boxout {border: 1px solid; набивка: 10 пикселей; }.emphasised {font-weight: bold; }.subtle {font-size: small; }
.boxout.emphasised {фон: желтый; }
.boxout.subtle {цвет: серый; }

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

Источник

Я рекомендую использовать БЭМ (модификатор блочных элементов).

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

BEM - Block Element Modifier - это методология, которая помогает вам создавать повторно используемые компоненты и совместное использование кода при фронтальной разработке.

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

http://getbem.com/naming/

Источник

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

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

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

Источник
Другие вопросы по тегам