Начинаем собирать HTML-библиотеку

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

HTML-библиотека это набор HTML-заготовок кода, названий классов для повсеместного использования. В частности для  шаблонов будущих версий css-framework.

Всем желающим предлагаю присоединиться к первой дискуссии на форуме, пообсуждать систему имён основных блоков страницы.

  • http://agat.in/css/professionalam-i-ne-tolko/ Профессионалам и не только

    [...] …предлагаю поучавствовать в дискусии, по поводу именования основных блоков на странице. [...]

  • http://www.chuprin.com Chupa

    Я так называю:
    #haeader
    #navigation
    #content (Основной контент)
    #sidebar-left, #sidebar-right (Если в этих колонках содержаться разные по тематике блоки)
    #footer

  • http://uggallery.audiopeace.ru/2007/09/06/standard-names UGgallery » Архив журнала » Дискуссия по поводу именования основных блоков на странице

    [...] инициировал обмен мнениями по вопросу именования стандартных блок…. Надеюсь народ не будет спать, тогда может получиться [...]

  • http://uggallery.audiopeace.ru uggallery

    Я на сегодня пришел к использованию следующих имен…

    Классы:

    wrap, lining (обертка, подкладка)
    content (как вариант: article)
    header, footer (классика жанра)
    aside, extra (для боковых, и не только боковых, блоков-колонок, которые содержат меню, новости сайта, ссылки, рубрики итдитп)
    nav (любое навигационное меню)

    ID (используются главным образом как якоря):

    to-navigation
    to-content
    to-top
    to-bottom

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

  • http://sukebe.ru Дмитрий Пленкин

    Последнее время склоняюсь к примерно такому варианту именования основных структурных блоков(подчеркиваниями показываю иерархию):

    #wrapper (иногда – #container)
    _ #header
    __ #main
    ___ #content (по настроению – #meat)
    ___ #side-bar-main
    ___ #side-bar-left
    __ #footer

    Часто используемые классы:
    .breadcrumbs (иногда использую #breadcrumbs)

    .active, .current – применяются к li в навигационных меню (active – если посетитель находится на одной из дочерних страниц, current – на данной)

    .headline – используется с первым h1, который встречается в блоке #content, т.к. часто для него нужен особенный верхний маргин или паддинг

    .lined – используется с таблицам, которые надо «разлиновать»

    Для форм (вернее для разных инпутов):
    .txt, .num, .captcha, .rad (для радио-кнопок), .chk (для чекбоксов), .button (для сабмитов)

    Еще для форм:
    .input-list – для списков (ul), элементами которых являются поля типа checkbox/radio

  • http://sukebe.ru Дмитрий Пленкин

    Упс, очепятка – вместо «#side-bar-left» следует читать «#side-bar-add» – это сайд-бар для всяких опций типа голосовалок.

    «#side-bar-main», соответственно – основной сайд-бар, например, с навигацией.

  • http://leshaogonkov.livejournal.com/ Огоньков

    Дмитрий Пленкин, Chupa
    использование left/right в именовании не семантично

    по теме
    помоему HEADER, FOOTER можно даже не обсуждать, это уже константа, мне кажется

    с CONTENT мне кажется та же ситуация

    NAVIGATION мне кажется будет лучше, т. к. это всё-таки общеиспользуемый будет фреймворк…

    насчет боковых панелей мне кажется лучше всего использовать SIDEBAR всё-таки, опять же из тех же соображений что и с NAVIGATION. для дополнительных – прибавлять суфикс additional[number]. Это конечно довольно спорно, но единственное нормальное, что пришло в голову))

  • admin

    Огоньков, у нас с тобой мысли в одну и ту же сторону движутся. :)

    Чтобы не распыляться, предлагаю всем перейти дискутировать на форум.

  • http://webdev.lovata.com Zigzag

    #container – разного рода контейнеры
    #leftbar – левая панель
    #rightbar – правая панель
    #sidebar – одиночная боковая панель
    #content – контент
    #footer – подвал
    #header – шапка
    #nav-glob – глобальная навигация
    #nav-loc – локальная навигация
    #paging – пейджинг страниц
    #breadcrumbs – хлебные крошки
    .active – активный элемент

    первое, что вспомнил =)

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

    Я для себя часть проблем с именованием снял — использую микроформаты. Как минимум для вёрстки блогоподобных постов, профайлов юзеров.

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

    hAtom, hCard, hReview — наборы готовых имён. Присмотритесь к микроформатам.

  • agat

    Использование микроформатов для контента, идеальный вариант. Но остаётся ещё много элементов, для которых нету микроформатов.

  • toxa

    Отличная идея с фреймворком .. не нова конечно … все мы приходим к чему то подобному но еще один вариант это все гда круто…. единственное что ненравится это кросбраузерность . вот в ие6 например страничка http://css-framework.ru/documentation/ вышлядит ужасно … непоявляется горизонтальная прокрутка и все едет … поправьте плиз а то как то глупо фреймворк который даже на своем сайте не работает :-)

    я конечно против ие … но от того что бы проверить в нем не удержался :-)

  • http://udaffa.net/ Lexa

    header
    main
    content
    side / sidebar
    footer

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

    1) #header;
    2) #body — тело для основных колонок;
    2.1) #content;
    2.2) #leftside, .sidebar;
    2.3) #rightside .sidebar;
    3) #footer.