Стандарты именования html-layout

Хочется поднять с глубин обсуждений такую тему, как стандартизация именования элементов в html-вёрстке.

Потому-что:

  • чтобы было понятно не только автору, но, и всем, кто продолжит работу с сайтом после…
  • для облегчения самого процесса работы
  • css-файлы станут намного понятнее и проще
  • ещё много плюсов…

Все следующие публикации связанные с этой темой будут построены по простому принципу:

  1. Пишется пост с темой обсуждения, предлагается несколько вариантов для принятия его в стандарт
  2. В комментариях любой жалающий может их оспорить, предложить свой вариант и т.д.
  3. Через неделю открывается голосовалка, с наиболее приёмленными вариантами стандарта
  4. Ещё через неделю, вариант решения, собравший наиболее количество голосов, уходит в стандарт

Обсудждать можем начать с того, как писать классы и идентификаторы из 2-ух и более слов:

  1. через – (header-logo)
  2. через _ (header_logo)
  3. через Большие буквы (headerLogo)


Социальное

  • http://pepelsbey.net pepelsbey

    .header-logo

    Просто потому, что именно этот вариант лучше всего проходит тест «лучшее визуальное восприятие». Уменьшить шрифт и попытаться пробежать глазами по коду.

    Подчёркивание идёт лесом хотя бы потому, что он было запрещено в CSS 2.0… ну и визуально разрыв слишком большой. В исходниках подчёркивание, слава богу, встречается очень редко и, главным образом, с лёгкой руки ex-программеров.

    Использование прописных букв для разбивания строк — даёт слишком слабый эффект разделения. В имена приходится вчитываться.

  • http://numberoneblogger.com/ Number One

    headerLogo или headerlogo

    >>слишком слабый эффект разделения

    я обычно просто группирую и отбиваю пустой строкой свойства относящиеся к одному элементу. например:

    #roll { }
    #roll ul {}
    #roll ul li {}

    .contactform input {}
    .contactform textarea {}
    .contactform input.btn {}
    .contactform input:hover, .contactform textarea:hover {}

    считаю элементы как они по коду идут. т.е. headerlogo буду искать вверху файла.

  • http://numberoneblogger.com/2007/02/02/standartyi-imenovaniya-html-layout/ Number One Blogger» Blog Archive » Стандарты именования html-layout

    [...] правильное начинание. Поддержим? 2 February 2007 | разное | RSS комментариев | trackback [...]

  • http://www.problog.ru/ saahov

    Я делаю так:
    #header-logo {}

    И стараюсь размещать классы и идентификаторы в соответствии с их положением в HTML. Т.е. html, body – всегда наверху.

  • http://www.slaff.net/ Slaff

    Простите конечно, но вы фигней страдаете, господа. Всё уже довольно давно и без этого стандартизировано.

    #wrapper, #header, #headerimage, #content, #sidebar, #footer + классы .entry, .story, .box, .sidebox, .clear и прочее.

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

    А вообще, верстая сайт так, что клиент от вас потом уходит к другому – это нехороший признак.

  • http://numberoneblogger.com/ Number One

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

    я вот вспомнил.

    Semantic Coding, What’s in a name, What’s in a name (pt2) – рассуждение в трех частях о стандартах именования блоков в коде. Основная мысль – именовать надо по контенту блока, а не по его положению на странице. и Structural Naming

  • http://numberoneblogger.com/ Number One

    а я вместо #wrapper часто пишу #wrap или #page

  • http://numberoneblogger.com/ Number One

    офф: почему нет подписки на комменты, неудобно же :(?

  • agat

    Случайно стёр:

    Евгений Неверов | evgeny.neverov.name

    Я, пожалуй, за вариант .header-logo

    Впрочем, это всё — дело сиюминутного настроения. В одном варианте я пишу слитно, в другом — через тире, в третьем — ещё как-нибудь. Думаю, что я такой не один.

    Поэтому соглашения будет сложно добиться.

  • agat

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

    А, принцип — «чем проще, тем лучше» ещё никто не отменял.

  • http://pepelsbey.net pepelsbey

    вы фигней страдаете, господа

    Ни разу не использовал перечисленные классы: .entry, .story, .box, .sidebox. Наверное потому, что .box — это просто коробка. Пустой звук, нифига не говорящий о том, для чего эта коробка делается.

    Впрочем, это всё — дело сиюминутного настроения

    Бывало смотришь на такие сиюминутности, а выглядит это как лоскутное одеяло, потому как всё уже придумано, а никто этим не пользуется

  • http://lovata.com Zigzag

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

    И всетаки голосую за дефис.

  • http://webmascon.com/ Максим Россомахин

    Поддержу Вадика: .header-logo

    А бэк для него, если нужен, поименую bg-header-logo.gif. С остальным по аналогии.

  • unutranyholas

    #header #logo{}

  • http://flack.ru Flack

    Согласен с Вадимом и Максом.

  • http://numberoneblogger.com/ Number One

    согласен на дефис. буду переучиваться…

  • http://seigiard.com Seigiard

    дефис
    только дефис :)

  • Ante

    Всегда было интересно посмотреть за процессом у других верстальщиков. У каждого свои устовшиеся решения. Может быть стоит организовать своеобразный мастер-класс: выдать всем желающим один макет на вёрстку, а позже выложить и обсудить принципиальные различия?

    Это могло бы дать повод поговорить о многом «старичкам» и другие позитивные перемены в сообществе.

  • http://reg.kost.ru kost

    Через дефис.

  • http://css-framework.ru/nachinaem-sobirat-html-biblioteku/ Начинаем собирать HTML-библиотеку : css-framework

    [...] Началось всё в моём блоге, хотелось бы перенести темы обсуждений из личного пространства сюда. [...]

  • http://www.sexhtml.ru/ Никита

    Пробовал все три варианта (“-”, “_”, “bigLetter”). Сейчас остановился на варианте “_”.