Какой лучший способ назвать идентификаторы и классы в CSS и HTML?

При назначении классов и идентификаторов для CSS лучший способ использования. В этом случае мне нужно, чтобы там было какое-то соглашение об именах, чтобы другие люди могли выбирать правила и понимать, как назвать их собственные идентификаторы и классы, используя один и тот же шаблон. Какие-либо предложения? Некоторые из создаваемых нами сайтов могут быть довольно сложными, но использовать общий заголовок структуры, содержание и нижний колонтитул. Именование должно быть эффективным.

Я не новичок в CSS. Я знаю, что даю им имена, которые представляют их структуру и т.д., Но просто хотят знать мнения людей действительно и способы сделать это.

Ответ 1

Лучший совет - использовать класс с семантикой в ​​виду

Хорошие имена не меняются

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

Хорошие имена    предупреждение, важное, загружаемоеИмя и подменю все хорошие имена. Они описывают, что определенный элемент представляет, и они вряд ли изменится. Предупреждение всегда будет предупреждать, нет важно, насколько выглядит страница изменения.

Плохие имена    border4px, lighttext и prettybackground - все примеры плохого имена. Вы можете откорректировать эту границу колоссальные 5 пикселей или фон могут выглядеть довольно старыми через некоторое время, и не совсем. Преимущество использование CSS заключается в том, что вам не придется многое изменить, чтобы изменить внешний вид вашего сайта. Если вам нужно изменить весь светлый текст на темный текст, и таким образом изменить все классы lighttext к darktext на всех ваших HTML-страницах, вы, вероятно, пропустите несколько.

из в этой статье

Ответ 2

Идентификаторы могут использоваться только один раз на странице, поэтому они полезны для основных структурных элементов, таких как "заголовок" и "нижний колонтитул" (до тех пор, пока HTML5 не войдет и не заменит их собственными элементами).

Классы могут использоваться несколько раз, и вы можете использовать несколько классов для каждого элемента. Они должны быть достаточно родовыми, поэтому вместо warningMessage вы можете создать один стиль message с основным стилем макета, а затем стили warning, info и error с разными цветами. Затем используйте <div class="message warning">etc</div>

Вы также должны использовать HTML-элементы, где это применимо. Вместо <span class="title"> используйте тег заголовка, например <h2>.

Как говорили другие, вы можете использовать символы подчеркивания или дефисы или шкатулку верблюда - т.е. my_style или my-style или myStyle. Просто выберите соглашение и придерживайтесь его (лично я использую my-style). Jitendra предложила в комментарии, что в нижнем регистре лучше, когда вы используете сжатие gzip, что верно для всех - для имен шрифтов, шестнадцатеричных цветов и в любом случае стоит указывать файлы (например, фоновые изображения) в нижнем регистре.

Иногда придумывать хорошие имена могут быть трудными. Подумайте о других местах, где вы можете использовать одно и то же форматирование. Например, если вы хотите поместить автора и дату статьи ниже заголовка в меньший серый текст, вы можете использовать .authorAndDate, но лучшим способом будет .byline. Это все еще довольно описательно и может использоваться и в других местах, например, подписи к изображениям.

Ответ 3

  • заголовок

  • сноска

  • контейнер

  • .post
  • .title

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

Ответ 4

описать и называть свои идентификаторы и классы семантическим способом, дать им смысл

Ответ 5

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

Попытайтесь как можно более подробно описать класс. Пример:

.menu: bad
.head_menu: better

.wrapper: very bad
.main_content_wrapper: better

редактировать; Хуже того, соглашение об именах, которое я видел, использует фактическое содержание стиля. Например:

.redButton

... потому что, когда я добрался до кода (устаревший код), но "красная кнопка" не была красной, а синей (или что-то в этом роде).

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

Ответ 6

Правила для именования атрибута id или класса просты. Держите его короче, держите его согласованным (т.е. Если вы используете дефисы, подчеркивания или CamelCase для одного, используйте тот же формат для других) и убедитесь, что имя основано на функции или значении элемента, а не на стиле применяется.

например.

<span class="warningMessage">, <span class="warning-message">, <span class="warning-message"> все вполне приемлемы.

<span class="red-text"> не будет... что произойдет, когда вы измените цвет на синий?

Ответ 7

Я называю свои идентификаторы и классы для их целей. Я стараюсь не использовать описания, которые используют цвет или направление.

Например, если у меня есть боковая панель слева, но для главного меню, я могу назвать ее #main или #mainMenu. Правая боковая панель на том же сайте будет #altSidebar или #subMenu.

У меня есть еще много классов, чем id, поэтому их называть немного сложнее.

Ответ 8

Мне нравится давать им одно слово, затем одно число, затем одно письмо. Например, Header1A, Header2A

Номер описывает один раздел. Если бы у меня был другой заголовок в другом разделе, я бы назвал его, Header1B, Header2B

или вы можете попробовать другой подход. Используйте имена на верблюдах для заголовка вы можете назвать его заголовком, просто как это. Но для содержимого внутри заголовка используйте camelcase. Например, headerMessage. Или headerLogo

Просто чтобы дать вам идеи