Раскрась свои теги. CSSL

         Я иногда сталкивался с тем, когда web-программист не знал CSS или, скорее, не хотел заниматься облагораживанием своего HTML, который являлся результатом работы разрабатываемого им скрипта. Это натолкнуло меня на мысль, что ему (программисту) не помешало бы иметь при себе некоторое средство для создания «красивых» страниц. Средство должно было бы включать в себя некоторый CSS, возможно, картинки, и подключаться к любому HTML (очевидно, созданному по некоторым определённым правилам). При этом смена CSS (и картинок) на альтернативные не должна была бы приводить к семантически некорректному отображению.
         Вышеобозначенные требования очень похожи на требования к составлению скина для какой-либо системы (в частности, CMS). Но, в отличие от скина, который заточен под конкретный HTML, в нашем случае хотелось бы максимально упростить правила написания HTML, чтобы разработчикам не нужно было держать в голове много сложных правил.
         Таким образом, оговаривая некоторые (небольшие) ограничения на HTML, мы с одной стороны гарантируем программисту, что его код, генерируемый с учётом этих правил, будет корректно оформлен любым сделанным для этих целей CSS, а с другой стороны, оговариваем шаблон изготовления самих этих CSS.

         CSSL (CSS Library) — так будет называться наша концепция. Она представляет собой CSS-фреймворк. Основная его задача — позволить не-дизайнеру и не-верстальщику при разработке своей HTML страницы иметь средство гарантированного её «облагораживания». При этом подразумевается, что результат применения соответствующего CSS должен быть расширен дополнительным CSS, если требуются не совсем стандартные стили.
         Итак, приступим.
         Будем нести основную мысль: программисту не нужно помнить специфических классов и конструкций. Только теги. Будем использовать богатство тегов HTML5, для совместимости — классы, совпадающе с именами тегов.

    Тег[.класс] Использование
    HTML4 HTML5
    Во что оборачивать содержимое:
    div.wrapper Обёртка всей страницы
    div.header header Шапка, заголовочный блок
    div.footer footer Подвал, нижний блок
    div.section section Основое содержимое
    div.article article Статья, текстовый блок
    Типовые структуры:
    ul Последовательность подобных блоков
    div.article ul, li article ul, li Маркированный и нумерованный списки
    dl, dt, dd Список определений
    ul.menu, ul.menu li menu, menu li Меню, навигация
    table, tr, td, th, thead, tfoot, tbody, caption Таблица
    form, fieldset, legend, input, input.text, input.radio, input.checkbox, input.file, input.submit, input.reset, button, textarea, label, select, option, optgroup Форма
    Специальные структуры:
    div.aside aside Примечание
    blockquote Цитата
    Внутри блоков:
    h1, h2, h3, h4 Заголовки
    p, ol, ul, address, div.copyright Параграф, списки, адрес, копирайт
    a, a.no_reload, a.logo, a:hover, a:visited, a:active, em, strong, cite, del, ins Ссылки, выделения текста


         Теперь то же самое подробнее:
         Начнём с самого простого — с инлайновых элементов: a, b, i, em, strong, strike, cite, del, ins, sub, sup. Часть из них (b, i, strike, sub, sup) несут только визуальную нагрузку, поэтому прописывать стили для них не будем. Другие (a, em, strong, cite, del, ins) несут также смысловую нагрузку и поэтому для них следует определить специфические стили. Элемент a нуждается в определении псевдоклассов a:hover, a:visited, a:active, а также специального класса для обозначения ссылок, работающих без перезагрузки страницы (AJAX), например, a.no_reload.
         Теперь определим элементы, которые определяют основные блоки страницы. Div.header является контейнером, который содержит вспомогательную информацию, распологаемую до основного значащего содержимого. Div.footer (или footer в HTML5), соответственно, информацию, располагаемую после основного значащего содержимого. Div.section (или section в HTML5) содержит основной контент. Ожидается, что секций на странице может быть несколько. Для навигации используется ul.menu (или menu в HTML5), который содержи элементы li со ссылками, текстом или навигационными структурами внутри, то есть подразумевается вложенность навигации. Активный пункт меню — li.active. Всё содержимое страницы должно быть обёрнуто в div.wrapper, который задаёт ширину, поля, положение контента.
         Должны использоваться следующие заголовки: h1 для логотипа или названия раздела сайта (на странице должен (по возможности) присутствовать в одном экземпляре), h2 для заголовков секций (количество должно совпадать с количеством секций), h3 для заголовков блоков и структур, h4 для заголовков в пределах блока структуры.
         Теперь обсудим типовые структуры, используемые при отображении информации. Первая структура — это обыкновенная таблица. Для её форматирования используются следующие теги: table, tr, td, th, thead, tfoot, tbody, caption. При задании стилей для заголовков (элементов th) следует понимать, что этот элемент может встречаться как в пределах thead, так и tbody; и так далее. Вторая типовая структура — список элементов, маркированный (ul) и нумерованный (ol). Так как часто ul используется для форматирования каких-нибудь последовательностей подобных структур, имеет смысл не маркировать ul, за исключением того лучая, когда он находится внутри div.article (article), который служит контейнером для текстов. Третья структура — список определений (двойной список) (в отличие от предыдущей структуры, здесь элементом списка является на один блок данных, а два); этот список форматируется с помощью тегов dl, dt и dd. Четвёртая структура — форма. Тег form содержит один или более элементов fieldset, которые содержат остальные элементы: legend, input, textarea, label, select, option, optgroup. Элемент label должен использоваться в «неэкономичной» манере, то есть ассоциированный с ним элемент (input, textarea) не должен в нём содержаться (для большей гибкости форматирования). Для оформления кнопок, относящихся к форме, следует использовать input; элемент button не должен применяться внутри форм, его назначение — действия, активируемые с помощью JavaScript. Для элемента input следует определить оформление для элементов input разного типа (input.text, input.radio, input.checkbox,input.file, input.submit, input.reset). Пятая структура — колонка; заключается в div.sidebar, может содержать блоки информации, меню и др., должна находиться перед div.section (section).
         Для форматирования цитат, содержащих много текста, следует использовать blockquote; возможны вложенные цитаты. Примечание, подсказка или подобное содержание должно быть заключено в тег div.aside (aside в HTML5). Div.article (article в HTML5) следует применять, когда нужно выделить или отделить (обернуть) большой объём текстовой информации.
         Просуммировав вышесказанное, получим
    • инструкцию для человека, кто собирается писать HTML-код, совместимый с CSSL
    • базовый (пустой) CSS, который будет являться заготовкой для написания CSS-шаблонов.

         Я написал несколько заготовок, чтобы проиллюстрировать вышесказанное:
         А вот как выглядит CSSL в действии:

    Чистый HTML

    Тот же HTML, только раскрашенный

    Ещё один вариант, раскрашенный с применением CSS3

         В отличии от других CSS-фреймворков:
    • Ориентирован на употребление с чистым html, не нужно заучивать много классов.
    • Ориентация на использование с современными браузерами (HTML5, CSS3). Для IE6 и т.п. — graceful degradation.

         Итог.
         Цель данного поста — получить отклик от:     
    • программистов, кто будет в этом заинтересован. Если такие найдутся, значит это актуально.
    • дизайнеров, кто не против посотрудничать. Итогом сотрудничества должна стать некоторая библиотека css-файлов, которую смогут использовать все желающие.
    • верстальщиков, кто мог бы конструктивно высказаться)

         Спасибо.

    PS. Мой щебетун, jQuery API cheat sheet.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 83

      +3
      Хороший подход к верстке.
        0
        Возможно) Есть мысли, нужно ли это людям. Есть желание поучаствовать?
        0
        А идея мне нравится, надо будет попробовать в использовании
          0
          Для этого нужно сначала сформулировать и запустить проект. Пока желающих нет(
            0
            Я готов помочь чем смогу
              0
              Вы верстаете? дизайните?
                0
                К счастью нет ) Программирую я, с CSS конечно знаком, но не уровень верстальщика.
                  0
                  Ну ясно. Для того, чтобы запустить проект, нужно понять 1. что это нужно, 2. скоординироваться верстальщикам т.п.
                    0
                    я верстальщик, надо перечитать и уточнить первый пункт
                    — чёрт, 500-ками кроет, попробую примеры позже посмотреть.
                      0
                      да, примеры, к сожалению, недоступны…
                        0
                        Хотя, нет, восстановил доступность
                          0
                          увы, но всё же ошибка 500.
                          0
                          Выглядит весьма здраво, мини-справочник по элементарному оформлению «для чайников». Польза очевидна для тех, кому не нужны сложные селекторы ввиду несложности задуманного оформления.
              +7
              Мне, как программисту, такое очень надо. Создавая свои проекты, даже прототипы, всегда обидно, что выглядят они некрасиво, а мастерства сделать это лучше нету пока.
                +1
                Дело даже не в мастерстве, а во времени.
                Ведь не каждый проект предназначен для массового пользования.
                Зачастую пишешь скрипт под себя, под конкретную задачу.
                Как следствие, не особо заморачиваешься внешним видом.
                С таким CSS-фреймворком можно было бы быстро придать интерфейсу приятный вид.
                Я за.
                +2
                Ох… в последнее время столько хороших заметок. закладки нещадно растут.
                Еще одна статья «под звездочку». Спасибо.
                • UFO just landed and posted this here
                    0
                    Я в какой-то момент понял, что в Evernote будет большинство заметок с Хабра и решил положиться на Хабровское избранно :)
                  +2
                  Аналогично. Бывает пишешь админку, написал виев, а css писать лень, ибо верстаю плохо.
                    –1
                    «виев» это круто, да…
                      +1
                      Иногда вместо стёба стоит просто объяснить… ;-)
                        0
                        Ок, (view) [вью] — вид
                        +3
                        «Виев» 0_0 Это слово будет приходить ко мне в ночных кошмарах=)
                          0
                          я знаю еще много таких слов, например «лайаут», «ррс», «роутер»…
                            0
                            Вот, кстати, вспомнилось не в тему: в детстве по телику показывали сериал «Гром в раю» (Thunder in paradise), так мы все поголовно называли его «тхундер»=))
                          +2
                          «View» читается как «вью», но лучше писать как "… написал view, а css ...", так будет понятнее. :-)
                            0
                            Да поторопился =) Хотел написать "… написал вью, а css...". Но решил, что подумают, что «вью» — ошибка-кракозябра. а «виев» будет понятнее =) Оказалось все не так =)
                          0
                          Для шапки сайта, в html5, используется header, а не head. Поправьте пожалуйста.
                            0
                            Да, конечно, спасибо)
                            0
                            А вы уверены что стоит использовать тег menu? Может быть лучше nav?
                              0
                              Да, возможно, nav лучше…
                              А вы на подскажете, чем они отличаются?
                                0
                                Разницы между классом «nav» и «menu» нету совершенно ни какой.

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

                                Равно сильно как и в верху упомянули вместо «head» использовать «header».
                                Разницы нету ни какой, класс вообще можно назвать как угодно, хоть просто «shapko» и разницы в отображении ни какой не будет.
                                  0
                                  Речь не о классах а о тегах.
                                  +1
                                  Из спецификации HTML5:

                                  The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

                                  Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.


                                  А вот menu — это «совсем не то»:
                                  The menu element represents a list of commands.

                                  Если полистаете спецификацию ниже, увидите — примение у menu совершенно не такое, как у nav. Вот, скажем, здесь, на хабре, кнопки под полем для ввода комментария или кнопки голосования — это то, что можно поместить в menu. А nav — почти все ссылочные блоки.
                                    0
                                    ясно, значит, nav может быть более уместным
                                  0
                                  я думаю это все же разные вещи
                                  меню — это меню
                                  навигация — это строки вида «главная — список элементов — элемент»
                                    0
                                    Я сейчас ответил выше, с выдержками из спецификации. Давайте обсуждать там.
                                    0
                                    Я согласен. Лучше сделать для html4 обёртку div.nav, а для html5 — элемент nav. Внутри вложенный список ul.
                                      0
                                      Насколько я помню, ul не нужен
                                        0
                                        В случае с menu — не нужен, вы правы.
                                    0
                                    Подобный метод «раскраски» как-правило применяется в корпоративных сайтах. Например logitech.ru. Разве-что подача немного отличается от вашей. Думаю, к этому моменту подходят любые серьёзные веб-девелоперы, у которых проектов более чем 10-20. Тут-то и появляются специфичные для верстки , и прочее прочее прочее.

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

                                    Также должен заметить, что проекты, как-правило специфичны, поэтому часть правил всё-равно будет изменено. Зачастую это даже логично и удобно. Например, вышеприведённый отлично подходит для того же logitech, так как является его фирменным цветом, в других преоктах будет .
                                      0
                                      Парсер съел все мои теги).
                                      Тут-то и появляются специфичные для верстки [b class=«green»][/b], [div class=«sideleft»][/div], и прочее прочее прочее.

                                      Например, вышеприведённый [b class=«green»][/b] отлично подходит для того же logitech, так как является его фирменным цветом, в других проектах будет [b class=«red/yellow/blue/etc»][/b].
                                        0
                                        Спасибо за конструктивизм)) Во-первых, применение CSSL мне видится не совсем в продакшне, то есть это — база для дизайна, а не сам дизайн. Самим дизайном это может быть уместно лишь, наверное, на личных сайтах и во всяческих админках. Во-вторых, основная идея — их две — это используй современные технологии и не забивай голову специфическими классами (большинство приведённых в тексте поста классов совпадают с тегами HTML5). В-третьих, в идеале — создание библиотеки готовых CSS'ок ))
                                          0
                                          Тут-то и появляются специфичные для верстки b class=«green», div class=«leftside», div class=«rightside», и прочее прочее прочее.

                                          Например, вышеприведённый b class=«green» отлично подходит для того же logitech, так как является его фирменным цветом, в других прoектах будет b class=«red/blue/white/etc».

                                          Парсер съел теги.
                                            +2
                                            ИМХО, имена классов типа «green», «big» и т.д. демонстрирует совершенно неправильное применение css и непонимание его сути. Классы должны описывать не то, как элемент выглядит, а то, чем он является. Тогда не надо будет, если потребуется сделать заколовки красными вместо зеленых, переписывать во всем коде имена с «green» на «red».
                                              0
                                              Это сделано для людей, которые ориентируются на выглядит, а не не является. Скажем так, для людей, которые не занимаются веб-девелопингом, но которые вычитывают и выкладывают новые продукты.
                                            0
                                            Но этот флеш-ролик на logitech.ru просто убивает и сводит на нет всю работу веб-девелоперов. С жутко тормозящего сайта в последнем ФФ на нормальной конфигурации компьютера хочется уйти
                                              0
                                              Не видел этот флэш, честно)). Попал под резку).

                                              Скажу лишь то, что хороший разработчик не всегда хороший флешер, правда ведь?)
                                                0
                                                ООО! Это громадная флешка на пол экрана! Отключите резалку и насладитесь! :)

                                                Совершенно с вами согласен! Считаю, что даже больше — хороший веб-девелопер и хороший флешер — это уже из разряда фантастики. Каждый должен заниматься своим делом (но знать, по возможности, максимум).
                                            0
                                            В целом, штука замечательная. Спасибо. :)
                                              0
                                              Штуки пока нет. Есть идеи, как сделать, чтобы штука стала?
                                              0
                                              Лично мне очень нравится использование «независимых блоков», о которых рассказывал Виталий Харисов.
                                              vitaly.harisov.name/article/independent-blocks.html

                                              Но публичного фреймворка с независимыми блоками пока нет. Как знать, быть может, что вы начнете его создавать %)
                                                0
                                                красивая утопия :)
                                                  0
                                                  Почему утопия? Это идея дополнительной возможности.
                                                  0
                                                  «Аоследовательность» — поправь
                                                    0
                                                    Поправил
                                                    0
                                                    Мне кажется, что при использовании вложенных меню кроме класса li.active необходим еще класс, который указывает путь в меню. Например:
                                                    <li>item 1</li>
                                                    <li class="path">item 2
                                                    <ul>
                                                    <li>item 2-1</li>
                                                    <li class="active">item 2-2</li>
                                                    <li>item 2-3</li>
                                                    </ul>
                                                    <li>item 3</li>
                                                    <li>item 4</li>
                                                      0
                                                      Любопытно: Вы отбили красные строки. Пробелами.
                                                        0
                                                        Так хабр же стили режет)
                                                        +1
                                                        input.checkbox, input.button, input.submit — почему не использовать input[type=checkbox], input[type=....] и т.д.?
                                                          0
                                                          как вариант — можно. но в отличии от классов, сложнее реализовать graceful degradation для IE6
                                                            +1
                                                            Ну и чёрт с этим IE6… на компах на которых он стоит столько вирусов, что им уже ничего не поможет.
                                                              0
                                                              Вообще говоря, описанная идея подразумевает поддержку шестого IE, но достаточно ограниченную. input.checkbox даёт больше гибкости, чем input[type=checkbox]
                                                          0
                                                          Мне, как программисту, это очень интересно. Но есть большое НО! Пока есть шестой ИЕ и для него надо писать отдельный css чтобы он отрабатывал «правильно» (а это отнимает не малое время), придется смериться что данная проблема останется… гребаный ИЕ6…
                                                            0
                                                            Есть некоторый нюанс. CSSL позиционируется как средство для базового CSS; этим я хочу сказать, что когда нужен красивый сайт в продакшн, дизайнер делает макет, а верстальщик его верстает. Применение же CSSL промежуточно.
                                                            0
                                                            поправьте «должна находиться перед div.dection (section)»
                                                              0
                                                              Спасибо
                                                              0
                                                              А есть ли тут, на хабре, верстальщики или дизайнеры, которые хотели бы поучаствовать?
                                                                0
                                                                А почему доктайп XHTML 1.0, а не <!DOCTYPE>?
                                                                  0
                                                                  а почему нет?
                                                                    0
                                                                    Ну, вы тут играете в совместимость с HTML5, а для браузеров разницы никакой.
                                                                      0
                                                                      пускай) хотелось сделать html-пример в одном стиле
                                                                  –1
                                                                  Вообще-то тэг menu есть и в 4.0 и в 4.1(может и в 3 и в 2, не смотрел) html, хотя он там deprecated.
                                                                  10.4 The DIR and MENU elements
                                                                  DIR and MENU are deprecated.

                                                                  Весело, правда?
                                                                    0
                                                                    Ну ивообще я не понял, что вы сделали. Как по мне это просто стандартные стили на ваш вкус. В чем продвинутость, «фрэймворкность»?
                                                                    Т.е. вы просто поменяли стадартный css на свой. Плюс добавили несколько классов.
                                                                    Я что-то не понял наверное в сути.
                                                                      0
                                                                      Наверное)
                                                                      0
                                                                      Идеи очень похожи на m5 css framework. Сначала сброс, потом прописываем все тэги. На текущем проекте использую его, при этом добавляя свои стили для таблиц, меню и др. элементов, которые недостаточно прописаны в данном фреймворке. В результате получается примерно тоже, что и у вас, только больше ориентированное под конкретный дизайн.
                                                                        0
                                                                        Что-то не очень понял суть этого фреймворка…
                                                                          0
                                                                          Посмотрите пример. Тот же простой html в основе + описание основных тэгов. Добавьте к этому описания недостающих тэгов и классы для новых элементов и получите свою идею. Подойдет как основа для развития ваших идей.
                                                                            0
                                                                            Ну, может быть. А библиотека у m5 имеется?
                                                                              0
                                                                              Вы имеете ввиду набор уже готовых сверстанных стилей? Такого нет, только один типовой вариант. Но технически никто не мешает прицепить к фреймворку еще один CSS с нужными стилями.
                                                                                0
                                                                                Ну понятно. Мы, получается, немножко о разном))
                                                                        0
                                                                        В Style #2 заголовки прижимаются к таблицам. Мне кажется вы пытаетесь разрешить отступ заголовка через стиль абзаца p { padding-bottom: 22px; }. Не лучше ли использовать h2, etc { margin-top:… }?
                                                                          0
                                                                          Во-первых, эти два примера не полные, это — наброски для демонстрации.
                                                                          Во-вторых, HTML я не писал и p никуда специально не вставлял.
                                                                          В-третьих, нижний отступ дан просто для визуальной отбивки абзацев (совпадающей с line-height для вертикальной равномерности).

                                                                        Only users with full accounts can post comments. Log in, please.