Оформление кода html и файла стилей разметки

Первое, к чему нужно привыкнуть — правильно писать код. Приемы сокращения кода не должны влиять на его читабельность.

Что значит «правильно»?

Нужно не только писать, но и оформлять код. Рекомендации взяты у Google.

• Не использовать табличную верстку. Таблицы применяются там, где что-то нужно показать в табличной форме. В остальных случаях применяем верстку HTML5.
• Применять семантическую разметку: article, aside, picture...etc
• Используйте в коде два отступа для того, чтобы показать зависимые элементы. Это правило применяется и в коде php. Если на каждый дочерний элемент применить два отступа, код получается красивым и наглядным. Я использую среду разработки Geany, чтобы писать код. Этот инструмент автоматически создает отступы.

Пример оформления кода HTML:

Вид:

Код:

  <nav>
    <ul>
      <li>
        <a href="">Ссылка</a>
      </li>
    </ul>
  </nav>
	
  <aside>
    <menu>
      <ul>
        <li>
          <a href="sitemap.html">Карта сайта</a>
        </li>
      </ul>
    </menu>
  </aside>

• Используйте элементы кода HTML так, как они задуманы. Если это a — как ссылку, если p — как абзац, table — как таблицу, h1, h2 и другие h как заголовки.
• Не рекомендуется использовать необязательные теги:

1. body
2. head
3. html
4. li
5. p
6. option
7. tbody
8. td
9. th
10. tr

• Подключая стили или скрипты javascript, не указывайте type
• Используйте относительные ссылки при включении в файл изображений или других медиа-ресурсов
• Пишите код в нижнем регистре
• Используйте кодировку utf-8 (без BOM)
• Комментируйте свой код
• Используйте HTML5

Файл стилей

О том, как именовать классы и идентификаторы мнение у каждого свое. Все мнения сходятся в одном: имя должно нести какую-то информацию.

Макет страницы обычно состоит из подобных элементов: блоков div, форм, кнопок, ссылок.

• Оптимальней всего задать всем повторяющимся элементам один и тот же класс. В этом случае код укорачивается. А его длина влияет на скорость загрузки сайта. То есть, применение унификации в стилях обеспечит во-первых — единый стиль и во-вторых — код небольшого объема.

Это не так просто, как кажется. Часто бывает, общий стиль в чем-то не подходит элементу. Все же унификация помогает.

• Записывая имена классов и идентификаторов в алфавитном порядке, я получила удобный для работы код. Легко находится определенный класс или идентификатор.

Рекомендации от Google (вольный персказ)

Имена классов и идентификаторов

Конечно, можно дать идентификаторам имена типа 1,2,3 или a,b.c. Но вот вопрос: когда разметка не будет изменяться довольно долгое время, сколько придется изыскивать обозначение идентификаторов, если вдруг понадобится правка?

Например, назвав идентификатор шапки #header, а не #a, в дальнейшем будет намного легче понять, к чему он относится.

Длина имен

Нужно стараться давать имена такой длины, которой достаточно для понимания.

Сокращенные формы записи

Правила css предлагают различные сокращенные формы записи. По возможности, их нужно использовать. Например, font: 100%/1.6 palatino, georgia, serif;

0 и единицы измерений

Не нужно указывать единицы для значения 0. 0 — он везде 0. так что в этом нет необходимости.

Обозначения цветов

Рекомендуется использовать шестнадцатеричную форму записи, например, черный #000000 или, в сокращенной форме, #000.

Разделитель в классе или идентификаторе

Старайтесь использовать дефис, а не знак подчеркивания, например, #first-line, а не #first_line.

Порядок объявлений

На мой взгляд — очень хорошая рекомендация. Google советует упорядочивать запись объявлений по алфавиту. Например,

background: fuchsia;
border:1pxsolid;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
color:black;
text-align:center;
text-indent:2em;

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

После объявления

Обязательно ставьте знак «точка с запятой». Например,

border-radius: 4px;
color: black;
text-align: center;

Селектор или объявление

Начинайте каждый селектор или объявление с новой строки. Например,

h1,

h2,

h3{ font-weight:normal;

line-height:1.2; }

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