5 советов верстальщику
19 May. 2008Никита Селецкий передал мне эстафету советов по вёрстке. Требуется дать 5 советов верстальщику по теме html-css. Идея мне нравится. Спасибо, Никита!
Вот мои советы:
Проверяйте качество верстки простым отключением CSS. Страница должна выглядеть простой, логичной и аккуратной. На ней не должно быть видно элементов оформления, но контент и навигация должны оставаться доступными, легко находиться и читаться.
Другая проверка — отключение картинок при включенном CSS (те же требования по доступности). Хорошо сверстанная страница, без картинок может выглядеть даже лучше чем с картинками.
Очень важно владеть элементарными средствами поиска ошибок. Расскажу про свои любимые.
Первый — очень быстрый способ:
* {outline: solid 1px;}Второй — незаменимый способ для поиска кросс-браузерных ошибок:
.foo {border-bottom: solid;}Позволяет найти схлопнувшиеся блоки, содержащие плавающие элементы, и прочее. Задаешь это свойство и ищешь на странице толстую горизонтальную линию. Иногда она оказывается очень далеко от того места, где ее ожидаешь увидеть.
Третий — позволяет локализовать ошибку в CSS-файле, найти конкретное свойство, если непонятно даже где искать. Делают так: удаляю часть кода из CSS-файла. Например, ровно половину. Проверяю в браузере. Отменяю удаление. Потом удаляю другую половину. Проверяю — отменяю. Потом удаляю большими кусками, по одному. Все время проверяя, исчезла ли ошибка. Куски удаляемого кода все время уменьшаются, вплоть до отдельных правил и свойств. Иногда это единственный способ, способный помочь.
Если у элемента есть больше одного border-а, эффективнее и короче написать, например, не border-top и border-bottom, а так:
border: solid #AAA; border-width: 1px 0;Когда border-ов три-четыре, это еще экономнее.
Для задания разных цветов:
border-color: red green blue gray;Запомните общепринятые имена классов (id): page — обертка, содержащая все элементы на странице; wrap — обертка для основных блоков страницы; subwrap — дополнительная обертка, header — шапка; content — главная часть страницы с уникальным контентом; aside — например боковая колонка в двух- трехколоночном макет; extra — еще одна боковая колонка; nav — любой блок с навигационным меню (в шапке, в боковой колонке, в подвале); footer — подвал.
В дополнение к этому известному набору я придумал имя lining — подкладка — в основном, для вложенных блоков, используемых, для задания отступов.
Эти имена могут найти применение на странице любого типа, практически в любом проекте. Не нужно изобретать каждый раз велосипед, можно использовать код вторично, код понятен многим без объяснений.
Используйте в качестве имен элементов только классы, а не id. И вы забудете о дилемме, что писать в каждом конкретном случае: id или класс :) Плюс, меньше шансов, что вы напишите два одинаковых id на странице (это невалидно). Присваивайте элементу id, только если без этого никак не обойтись, или если вас специально об этом попросили.
Я старался написать простые советы. Надеюсь, они будут полезны.
Самое трудно для меня теперь, это придумать кому бы передать эстафету. Мало нас, не забросивших презренный блогинг на тему CSS- и HTML-разработки :) Надеюсь, коллеги подхватят. Вот они:
21 May. 2008 at 15:05
Именование основных классов можно оспорить.
Не менее часто встречаются “container”, “layout”, “branding” вместо “header” и т.д.
21 May. 2008 at 15:05
Зачем оспаривать? Я просто советовал те, которыми пользуюсь сам. Это советы, а не истина в последней инстанции.
Некоторые из классов, что я предложил, имеют аналоги среди элементов HTML 5, насколько я знаю. Тот же header, например. Но и это не повод использовать всегда это и только это. Это свободная страна :)
21 May. 2008 at 15:05
Спасибо за советы! Очень полезно!
Я обычно вместо класса aside использую sidebar.
Насчёт id, тут долго думать не надо. Если объект обязательно должен быть уникальным — id, если не будет или не известно, будет или нет — class. Всё зависит от задачи. Например, для тэга body, чтобы использовать разную css вёрстку для разных страниц чаще всего используют тэг id. Хотя id больше нужен для javascript, чем для css.
21 May. 2008 at 22:05
Спасибо за советы и доверие, Саша. Подхватил. ;-)
22 May. 2008 at 09:05
Не согласен с пунктами 4 и 5.
Я думаю что у каждого выработался свой набор имен, которые он использует постоянно.
По поводу классов и id все просто. ID – уникальный элемент, класс повторяющийся. Основные блоки, такие как шапка, контент, меню и тд рекомендую маркировать с помощью id. Одна из многих причин – на блок с id можно ссылаться, не используя якоря.
22 May. 2008 at 12:05
Весьма интересная заметка, благодарствую. Все гениальное просто..как сам не додумался до * {outline: solid 1px;} и .foo {border-bottom: solid;}, не понимаю ;) Наверное, еще мало опыта.
22 May. 2008 at 14:05
Спасибо, 3 очень ценный для меня совет. По пунктам 4 и 5 согласен с Никитой.
27 May. 2008 at 14:05
Пункты два и четыре – очень актуальные.
28 May. 2008 at 14:05
Очень здорово и свежо. Особенно понравились способ отладки схлопывающихся блоков и вариант сокращенного описания сложных рамок.
К первому пункту можно добавить функцию WebDeveloper Toolbar для Firefox, которая показывает вложенность заголовков на странице. Information -> View document outline
Вот пример для этой страницы: http://www.dserg.com/headers.png — полный треш :)
04 Jun. 2008 at 22:06
Вместо “aside” обычто пишут “sidebar”
05 Jun. 2008 at 13:06
a. Обычным это является только для блогов.
b. Sidebar – это “боковая полоска”. Звучит не слишком семантично. Aside – это “отступление, отклонение от темы”. Это уже похоже на семантику.
c. А если в макете две боковые колонки? Как их назвать? Sidebar и sidebar2 что ли? Это не масштибируемое решение, предназначенное для блогов с простой версткой.
05 Jun. 2008 at 13:06
Жаль не сказали какого типа блоки так именуют. Меня это навело на некоторые мысли. “Layout” – отличное имя для таблицы, используемой исключительно для верстки. “Branding” вместо “header” – прекрасно подойдет для блока который выглядит как шапка, но на самом деле расположен в конце html-страницы. Header все-таки подразумевает расположение в начале чего-либо. А вот “container” по-прежнему вызывает у меня недоумение. Этим именем можно назвать что угодно. Ну “содержит” блок что-то, а что это, и почему этому содержимому требуется контейнер? Невнятное какое-то имя. Хотя и распространенное.
Распространенность – вообще, слабый критерий. Табличная верстка и немасштабируемые шрифты тоже очень распространены. Я стараюсь использовать только те имена, смысл и назначение которых я понимаю, неважно насколько они распространены.
05 Jun. 2008 at 13:06
Идентификатор aside, думается, появился недавно и, вероятно, произошёл от одноимённого элемента из черновика HTML5 и пока, насколько я знаю, широкого применения не получил, что, в общем-то, вполне закономерно. Однако по смыслу это лучше, чем sidebar.
Я, например, всегда называю такие блоки app (от слова appendix), а если их более одного — app-1, app-2 и т. д.
Идентификаторы типа sidebar всегда несколько удивляли — ведь дополнительный блок вовсе не обязан располагаться сбоку.
05 Jun. 2008 at 14:06
А каковы критерии уникальности? Каждый блок, по-своему уникален, но почему мы только некоторым назначать уникальный идентификатор.
Уникальность id – не причина его использования, а следствие. Это адрес, это ссылка, для дальнейших манипуляций пользователем, скриптами, пользовательским агентами. Ни для чего больше он не предназначен.
Либо я что-то не понимаю, либо те, кто постоянно приводят довод о какой-то “уникальности” объектов.
Другое дело, когда говорят о маркировке крупных блоков айдишниками. Это я понимаю. И то только потому, что это позволяет наладить навигацию между этими блоками. Но вот только сколько вы видели сайтов, где эта навигация существует? И на скольких сайтах вы этим пользуетесь? Лично мне как-то не удается, и кажется неудобным. Получается, что практичность этого дела мала, на мой взгляд.
05 Jun. 2008 at 14:06
Да, все так, по-моему.
Appendix – это здорво. Мне нравится. Хотя нумерованные имена я недолюбливаю, но самостоятельно я бы использовал.
Мне тоже так кажется, только я еще подумал, что side – это прежде всего “сторона; бок; край”. А край может быть и нижним и верхним. Как не распологай, все равно блок окажется где-то с краю :) Но имя все равно
чисто описательноеописывающее исключительно внешний вид.05 Jun. 2008 at 14:06
Если мы стремимся к лучшей семантике, чтобы всё было понятно не только автору, нужно выработать общий словарь для блоков общего назначения.
Сейчас мы пишем имена, чтобы было что использовать в качестве селекторов, а ведь основная ценность имен в том, что это метаданные. Данные ценны только если они понятны многим.
10 Jul. 2008 at 02:07
еще я встречал что замест nav используют navbar.
Также встречал когда отделяют блоки в которых указывают только ширину от блоков в которых указывают только margin либо паддинг! Так для внутреннего блока в котором указывают паддинг называют paddin( на сайте http://www.apple.com) либо встречал для таких же блоков такое название inner!
Да было бы неплохо если бы был какой то общий словарь семантических имен для блоков
10 Jul. 2008 at 02:07
не могу понять это .foo {border-bottom: solid;}
Это получается класс надо приписывать дивам которые проверяешь схлопнулись они или нет?
10 Jul. 2008 at 13:07
inner – Думал об этом варианте. Решил, что не очень внятное слово. Это прилагательное, а обычно для имен классов используют существительные. Потому я остановился на lining.
paddin – Позор Эплу :) Тут они не далеко ушли от тега center и font. К сожалению, флагманом в области верстки Эпл никогда не был. Плетутся в хвосте. (Главное – не путать верстку и веб- дизайн. В последнем они очень влиятельны.)
Кстати, щас часто стали встречаться имена min-width, max-width. Это то же самое что и padding – не есть гуд, по-моему. Для назначения min-width, max-width лучше использовать блоки с именами page и wrap.
Словарь я потихоньку собираю :) Спасибо всем кто присылает свои варианты!
16 Jul. 2008 at 14:07
Метод годится не только для этого. Не только для схлопнувшихся блоков. Можно проверять высоту-ширину у любых блоков с неявными границами (без цветного фона и бордеров).
Прописывать класс разным элементам в html-коде не обязательно. Проще изменить селектор в CSS. Например: * {…} или DIV {…} и так далее. Чего хочешь то и покажет.
В Файерфоксе конечно есть плагины для того же самого, но этот метод кросс-браузерный и быстрый.
17 Jul. 2008 at 01:07
Да, точно в фаервоксе есть в плагине web developer!
25 Jul. 2008 at 17:07
Неверно на мой взгляд. id лучше использовать для элементов, которые точно будут в одном экземпляре на странице (одна шапка, одна левая колонка/правая колонка, один блок страницы, один подвал) Во-первых в дальнейшем видя присвоенный id блоку можно быть уверенным, что блок этот больше на странице нигде не встречается.
Во-вторых по id работает js функция getElementById, если на странице реализованно динамическое управление контентом.Через классы найти нужный элемент будет гораздо сложнее.
25 Jul. 2008 at 19:07
То, что шапка и подвал будут в единственном числе мы можем гарантировать. А вот то, что никакой больше элемент не получит класса с тем же именем – гарантировать нельзя. И прощай валидность.
Вот динамическое управление контентом – другое дело. Для этих целей ID и создан. Тут уж никаких классов. Генерировать такие ID лучше средствами движка с базой данных, чтобы избежать дубликатов.
Я же речь веду об именах для работы с CSS.
16 Nov. 2008 at 20:11
Для проверки кроссбраузерности советую ресурс:
htt_://browsershots.org/
Абсолютно согласен по поводу пятого пункта.Классы,позволяют избежать путаницы да и работать с ними удобней
29 Sep. 2009 at 13:09
в IE6 не работает * {outline: solid 1px;} – как обойти?
29 Sep. 2009 at 18:09
Использовать border-bottom c шириной 2-4 пикселя.