Sharing my mind…

Андрей Бородийчук

Несколько рекомендаций HTML-верстальщикам

Здесь я собрал рекомендации HTML-верстальщикам по написанию HTML/CSS кода для лёгкой и быстрой интеграции с CMS. Эти рекомендации общи для всех случаев, когда со свёрастанным вами шаблоном будут работать другие люди.

  1. Учите матчасть. Элементы наследуют определённые свойства своих родителей, поэтому нет смысла, например, указывать font-size для дочернего элемента, если он указан для родителя, и его значение не нужно изменять. На w3school есть отличные лаконичные мануалы. Это поможет уменьшить объем кода, а значит сделает результат неизбежных впоследствии модификаций CSS более предсказуемым.
  2. Не брезгуйте гуглить. Некоторые решения уже были много раз реализованы до вас, и единственно правильный патерн работы с ними — скопировать и вставить. Например, кроссбраузерный @font-face. В этом же примере можно подсмотреть и вместо абсурдного прописывания font-family для b, strong, и прочих элементов, которые должны отображаться болдом в случае, если для жирного начертания идёт отдельный файл шрифта.
  3. Учите мачасть соседних дисциплин. Совсем не зазорно для верстальщика разбираться в шрифтах — вышеприведённыый пример с тем же успехом подходит и для курсивного начертания.
  4. Помните, что вы — не последний человек, который работает с HTML-шаблоном. Если задействовать какой-либо нормализатор стилей вполне логично, то глобальное сбрасывание привычных свойств — та ещё ловушка. Список должен по-умолчанию отображаться как список. Если вам нужно, изменить свойство display элементов списка, изменить привычные margin/padding, либо задать размеры h1…hx — ограничьте ваши изменения тем контейнером, где это требуется. Тогда любой новый внешний контейнер не будет наследовать эти изменения, а значит его контент будет реагировать на разметку так, как от него этого ждут, и не нужно будет переназначать описанные ранее свойства.
  5. Не добавляйте лишних контейнеров — не всегда возможно их один-в-один воспроизвести при интеграции. Да и иногда они бывают уж откровенно-лишними.
  6. Предполагайте, что контент (тот самый, Lorem ipsum) будет набиваться непрограммистами через WYSIWYG-редактор, а значит, чем примитивнее разметка в нем, тем проще редактору добиться результата. Разумеется, можно добавить свои классы в  редактор, но основная проблема — сделать так, чтобы через год человек за компьютером не думал, какой же класс добавить ячейке таблицы, чтобы она отображалась как следует, и точно ли это нужно проделать именно с ячейкой, а не строкой.

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

Варианты решения этой проблемы — SASS/SCSS или Less. Лично я использую SASS — из-за его cинтаксиса. Главный козырь этих инструментов — используя их нужно очень постараться, чтобы написать плохой код.

Собственно, всё вышенаписанное можно свести к трём: учите матчасть, не плодите сущностей сверх необходимого, и keep it simple, stupid. А я периодически буду дополнять этот список.