Семантическая вёрстка. Часть вторая

24 Апрель 2008

По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008.

Современный взгляд на организацию кода

Продолжение. Начало — «Семантическая вёрстка. Часть первая»

Второй уровень семантики: именование элементов

Для создания второго смыслового уровня документа у нас есть два способа именования элементов: id и class. Каждый имеет свои особенности, в силу которых формируются типичные ситуации применения каждого из них.

Имя элемента характеризует его функциональность или содержимое: упорядоченный список (первый уровень семантики) комментариев (второй уровень семантики).

  1. <ol id="comments">
  2. <li>Первый</li>
  3. <li>Второй</li>
  4. </ol>

Согласно спецификации, id — это имя уникального элемента, в большей степени подходит для создания структурной разметки документа:

  1. <body>
  2. <div id="header"> … </div>
  3. <div id="content"> … </div>
  4. <div id="footer"> … </div>
  5. </body>

Читать дальше…

Комментарии: 27

Семантическая вёрстка. Часть первая

22 Апрель 2008

По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008.

Современный взгляд на организацию кода

Начало. Продолжение — «Семантическая вёрстка. Часть вторая».

Прежде всего, давайте договоримся: семантическая вёрстка — это не гербалайф. Она не поможет вам в одночасье научиться верстать в восемь раз быстрее, IE6 вдруг не перестанет бажить, да и волосы не станут гладкими и шелковистыми, скорее наоборот. Более того, использование данного подхода потребует от вас бóльших умственных усилий. Как на освоение методики, так и в работе с ней.

В чём же смысл? Зачем я предлагаю использовать подход, который, на первый взгляд, только усложняет жизнь? Просто поверьте — оно того стоит, но обо всём по порядку.

Семантика?

Семантика (фр. sémantique от греч. σημαντικός — обозначающий)

Понятие «семантика» пришло к нам из лингвистики в несколько сокращённом значении для того, чтобы можно было применить его к HTML-вёрстке. Прежде всего, семантика в вёрстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметки в простой текст.

Читать дальше…

Комментарии: 38

CSS-менеджмент: файлы

5 Февраль 2008

Сегодня, когда большинство здравомыслящих разработчиков уже научились отделять содержимое от оформления, и большая часть работы по вёрстке сайта ведётся с файлами стилей, настало время поговорить об удобной организации этой работы. Ваши CSS-файлы превратились в бесконечные нечитаемые простынки, код пестрит множеством страшных хаков? Надеюсь, что нет, но всё же: перед вами некоторые советы по организации CSS, которые прозвучали на конференции РИТ-2007 в докладе «CSS-менеджмент».

Для удобства, выделим три основных уровня оптимизации:

  • Файлы
  • Блоки правил
  • Правила

Сегодня речь пойдёт о файлах.

Читать дальше…

Комментарии: 32