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

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

Потому-что:

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

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

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

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

  1. через – (header-logo)
  2. через _ (header_logo)
  3. через Большие буквы (headerLogo)
  • Пробовал все три варианта ("-", "_", "bigLetter"). Сейчас остановился на варианте "_".
  • Через дефис.
  • Ante
    Всегда было интересно посмотреть за процессом у других верстальщиков. У каждого свои устовшиеся решения. Может быть стоит организовать своеобразный мастер-класс: выдать всем желающим один макет на вёрстку, а позже выложить и обсудить принципиальные различия?

    Это могло бы дать повод поговорить о многом «старичкам» и другие позитивные перемены в сообществе.
  • дефис
    только дефис :)
  • согласен на дефис. буду переучиваться...
  • Согласен с Вадимом и Максом.
  • unutranyholas
    #header #logo{}
  • Поддержу Вадика: .header-logo

    А бэк для него, если нужен, поименую bg-header-logo.gif. С остальным по аналогии.
  • Очень давно писал через подчеркивание, сейчас пишу через дефис, хотя меня и заинтересовал вариант с прописными буквами.

    И всетаки голосую за дефис.
  • вы фигней страдаете, господа

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

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

    Бывало смотришь на такие сиюминутности, а выглядит это как лоскутное одеяло, потому как всё уже придумано, а никто этим не пользуется
  • офф: почему нет подписки на комменты, неудобно же :(?
  • а я вместо #wrapper часто пишу #wrap или #page
  • Слафф, это названия из WP, а речь о самых общих случаях. Есть такие стандарты? Давай ссылку, может и не надо ничего будет придумывать.

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

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

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

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

    А вообще, верстая сайт так, что клиент от вас потом уходит к другому - это нехороший признак.
  • Я делаю так:
    #header-logo {}

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

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

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

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

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

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

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

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

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