Красивая вёрстка сайтов

Типичные ошибки, которые мы задолбались исправлять


Каждый, кто работает в сфере создания и продвижения сайтов, мечтает о том, чтобы клиенты приходили по очереди, равными порциями, в достаточном количестве, позволяли дизайнерам воплощать всё задуманное… Но, пожалуй, больше всего нам хочется, чтобы клиент приходил — и мы начинали работу с нуля. Сначала разрабатывали сайт, потом — поддерживали и продвигали.

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

Разобрав вёрстку десятков различных сайтов и доведя их до вменяемого состояния, мы готовы поделиться простыми советами для исправления типовых ошибок и проведения косметического ремонта.

Универсальные классы

Слева — лендинг на фреймворке, справа — без него

Если от родителей (первоначальных создателей) вашему сайту достались уродливые бородавки, незакрытые теги, кривые ноги, то от ребёнка лучше отказаться — такие грубые ошибки мы не обсуждаем. С другой стороны, ладно скроенный лендинг из одной страницы, или даже корпоративный сайт на два десятка страниц часто имеет «раздутый» код из-за CSS-фреймворков. Несмотря на всю современность и техническую (относительную) сложность, которая позволяет судить об уровне ваших навыков, при использовании CSS-фреймворков дерево DOM неоправданно увеличивается, что усложняет чтение кода.

Приведём пример простого блока услуг на любом корпоративном сайте:

Имена классов могут быть любыми, но главное — позаботиться об их уникальности и самоидентификации. К примеру, если вложенный элемент входит в класс service, то логично его назвать service-item, даже если у вас нет других классов на этой странице. Всегда помните о том, что каждая страница может измениться, увеличиться — и код станет нечитаемым.

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

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

Применение wrapper довольно широко, например, можно запретить обтекание картинки (которой присвоен атрибут float) через overflow: hidden. На всякий случай напоминаю, что универсальные классы обязательно должны иметь чётко указанных родителей в CSS, в качестве альтернативы можно пользоваться селектором > для ограничения действия стиля.

Хозяйке на заметку

  • Стандартизируйте имена основных папок корня и названия страниц. css — стили, image — изображения, fonts — шрифты и т.д.
  • Не привязанные к конкретному контейнеру поп-апы и другие блоки — размещать перед </body>.
  • Сброс значения поля по клику — хорошо (используется placeholder или js).
  • Минимизируйте дерево DOM не в ущерб здравому смыслу.
  • Меню верстается в ul, подменю — внутри li без div.
  • Таблицы верстаются таблицами (ваш К.О.), в редких случаях с блоками. Чередующиеся строки с разными стилями — через CSS-селекторы или с помощью классов even и odd.

Три предложения о скриптах

Слева — кривой JS, справа — хороший

Скрипты лучше всего подключать перед закрывающим body. Статичные вызовы функций одинаковые на всех страницах — в отдельный файл. Если используются сторонние библиотеки и плагины, то стоит соблюдать последовательность подключения скриптов.

Хозяйке на заметку

  • Уберите “language“ при подключении скрипта в тело документа (<script type=”text/javascript” language=”javascript”>): сейчас он считается устаревшим.
  • Чистый JavaScript может быть быстрее, чем использование библиотек.
  • При написании кода не забывайте использовать точку с запятой в нужных местах.
  • При создании большого числа переменных используйте var один раз, разделяя переменные запятыми.
  • Проектируйте дизайн сайта, предполагая, что JS может быть отключен. И уже после этого начинайте улучшать макет, используя JavaScript.
  • Комментируйте важные части кода.
  • Уменьшите количество глобальных переменных

Таблица стилей CSS

Таблицу стилей каждый волен оформлять так, как ему заблагорассудится, но если вы хотите существенно повысить читаемость кода, то не грех воспользоваться древовидной однострочной формой записи.
Сравните:

Хорошо и плохо оформленные таблицы CSS

Свойства имеет смысл упорядочить очевидным способом — кто-то делает это по алфавиту, кто-то начинает от более общих параметров (например, расположение контейнера), затем границы, бэкграунды и, наконец, шрифты. После всего добавляются новые свойства CSS3.

Хозяйке на заметку

  • Используйте сокращенную форму записи границ и отступов, т.е. margin: 10 10 10 10, вместо отдельного присвоения значения каждой границе. Это сильно сокращает код.
  • Подключайте reset в начале общего файла стилей. Внешние шрифты подключайте сразу после reset. Так вы сэкономите на запросах к серверу.
  • Не создавайте отдельный файл, например, со всеми иконками. Его неудобно редактировать, если у одной вдруг увеличится размер.
  • Крупные блоки и разделы сайта в коде предварите комментарием — /* comment */.
  • Что касается IE и других древних версий браузера и хаков, то обычно они размещаются в конце общего файла стилей. Если их много, то можно воспользоваться подключением с помощью условных комментариев.

Авторы: Александр Асланов и Илья Ашапатов — front-end разработчики компании “ТриЛан


Ищите еще интересные истории, чтобы почитать в течение недели?
Подписывайтесь на Medium · Twitter · Facebook · VK