Долго
я не писал, итак начнем.
Я
не один год, занимаюсь html-версткой,
и хочется вам рассказать пару правил,
которых я стараюсь поддерживаться. Это
все лично мое мнение, и я никого не
заставляю следовать за мной.
- Нужно быть на шаг впереди дизайнера. :) Нужно быть хитрее дизайнера. :) Верстать нужно так, чтобы гениальные мысли дизайнера, не заставляли переверстывать пол страницы.
- Я использую <!DOCTYPE html>, потому что, как показывает практика, это самый стабильный doctype.
- Пытаюсь использовать как можно меньше картинок.
- Я придерживаюсь мнения, что IE давно не показатель (он никогда и не был показателем для меня :) ). Все, что не влияет на функционал, делайте в css3. Такие стили как градиенты, скругления углов etc…
- Для небольших картинок и иконок использую спрайты.
- Class и id лучше называть с каким-нибудь префиксом.
Зачем, спросите вы?
Например, вы подключаете какой-то плагин jquery, он имеет определенные стили и html, и случалось так, что классы совпадали с вашими. Если проект большой – тут начинаются проблемы с наложением стилей друг на друга.
- Class и id лучше обзывать в одном стиле: верблюжий (.myMegaClass) или через префикс (.my-mega-class), или еще как-то, но я лично придерживаюсь обозначения имен через префикс.
- Пытайтесь усложнять название идентификаторов (но без фанатизма), варианты типа .left желательно не использовать.
- Если некоторые элементы надо скрывать яваскриптом, лучше не использовать классы со стилем “display:none;”, пишите прямо в html style=”display:none;”, чтобы яваскриптом можно было добавлять красивую анимацию.
- Старайтесь не использовать id на маленьких элементах, потому как нам может понадобиться использовать несколько раз этот элемент на страничке.
Лично я вообще не пользуюсь айдишниками, потому что я не экстрасенс и не знаю, что придет к дизайнеру на ум через время. А зачем мне проблемы в будущем, и придумывание костылей? :)
- Старайтесь соблюдать семантику. Если это ссылка, то она должна быть тегом <a>. Если это список, не имеет значения, горизонтальный он или вертикальный, то нужно использовать теги: <ul>, <ol>, etc.
- Не начинайте class или id (ни в коем случае, хоть под дулом пистолета) с цифры.
- Не забывайте про такие атрибуты, как alt=””, title=”” etc.
- Не забывайте закрывать теги: <br />, <img … /> etc.
- Логотип должен быть <h1> со ссылкой на главную страницу сайта.
Есть много хороших плагинов для браузеров, которые показывают структуру контента и заголовков (например, HTML5 Outliner для хрома).
- Значения атрибутов должны быть в двойных кавычках или одинарных. Приучите себя к одному стилю, в последующем при “Find” вам сыграет на пользу.
- Не валидные стили, для костылей а-ля старый ИЕ, лучше выкидывать в отдельный файл (например styles.ie.css). Ну, и с помощью условного комментария подключать его.
- Не помещайте в инлайновые элементы блочные.
- Используйте “font-face” если надо подключить кастомный шрифт.
Вообще я противник текста, который сделан картинкой и cufon’а. Как по мне в таких ситуациях, лучше отказаться от дизайнерской мысли и использовать кастомный шрифт, ибо это костыль.
- Ну, и на последок, не забывайте проверять валидацию. ;-) Хоть иногда.
Комментариев нет:
Отправить комментарий