Skip to content

Latest commit

 

History

History
136 lines (98 loc) · 11 KB

layout_rules.md

File metadata and controls

136 lines (98 loc) · 11 KB

Требования к верстке

HTML

1 У тега form не должно быть атрибутов, классов или id.

2 Элементы html могут иметь id, но никакие id не должны быть прописаны в css или js коде. Также не желательно другим образом повторять id дважды, например в атрибутах другого элемента.

3 Каждый логический элемент страницы должен иметь единственный описывающий его селектор. Пример:

<h2>Название статьи<h2>
<img/>
<p>Первый абзац интересной статьи</p>
<p>Второй абзац интересной статьи</p>

не правильно - невозможно назвать селектор для элемента статья, невозможно назвать селектор для элемента тело статьи

<h2>Название статьи<h2>
<section>
    <img/>
    <p>Первый абзац интересной статьи</p>
    <p>Второй абзац интересной статьи</p>
</section>

не правильно - невозможно назвать селектор для элемента статья, хотя тело статьи можно выделить по селектору section

<section>
    <h2>Название статьи<h2>
    <div>
        <img/>
        <p>Первый абзац интересной статьи</p>
        <p>Второй абзац интересной статьи</p>
    </div>
</section>

правильно - возможно выделить каждый логический элемент: всю статью, заголовок, тело статьи

4 Не нужно использовать h1 внутри логических блоков за исключением логического блока страницы.

5 html не должен содержать никаких невидимых элементов отображаемых с помощью js. Допустимо если есть элементы скрываемые css на разных разрешениях, но те которые показываются с помощью js - только по согласованию.

Дополнение

Почти все приведенные выше требования направлены на переносимость и переиспользуемость блоков верстки. В реальной жизни многие блоки используются на сайте многократно, меняют места на странице, отображаются вне страницы в который были сверстаны и т.д. Из-за этого верстка сайта страницами очень сильно осложняет жизнь. То что сверстано как страница списка статей, может в будущем стать списком "похожие статьи" внизу детальной страницы статьи. При этом если блок списка не переносим, по какой-то причине (например содержит внутри h1), то работы по его добавлению потребуют адаптации верстки, а не просто вставки одно строки с параметрами. В идеальном мире я бы хотел видеть отдельно сверстанной пустую страницу + ее только ее стили и отдельно сверстанный каждый крупный элемент + отдельно его стили: форма, статья, список элементов пустой и отдельный элемент списка, слайдер и так далее. Если вам не принципиально, пожалуйста используйте 4 пробела в качестве отступа.

Файлы стилей (css)

1 Размер файла не должен превышать 600 строк и 20кб (если это не файл содержащий src шрифтов/спрайтов), но не нужно разделять файл для одного логического элемента на два файла по формальному признаку размера. Если используется препроцессор CSS, то должны быть предоставлены исходные файлы, а не собранный файл стилей. Использование препроцессора должно быть согласовано до начала любых работ. Если этого мало - подключайте больше файлов. Разделяйте стили логически - layout, elements, heder, footer и т.д.

2 Запятые в файлах стилей:
Каждый селектор css должен начинаться с новой строки.
Так нельзя:

    h1, .h1 ....

Так нужно:

    h1,  
    .h1 ...

Значения свойств содержащие "," не должны иметь пробела после нее.
Так нельзя:

    linear-gradient(45deg, transparent 0px, #fff 0) bottom left;

Так нужно:

    linear-gradient(45deg,transparent 0px,#fff 0) bottom left;

3 Блоки @media не должны находится в одном файле со стилями вне этих блоков. Т.е. на каждый блок media должен быть отдельный файл, скажем header-media760.css

4 Недопустимо использовать тег form как селектор в файлах стилей.

JS

0 Все js файлы не относящиеся к библиотекам должны быть предоставлены в исходном виде. Все используемые библиотеки должны содержать сохранненую информацию о версии и источнике библиотеки, а каждая библиотека должна быть предоставлена в отдельном подключаемом файле.

1 Все сообщения выводимые формами, кнопками и так далее, должны иметь функцию для показа их с передаваемым в функцию текстом. Не должно быть никаких сообщений уже содержащих текст в js или html. Никакие модалки не должны находится в теле html и показываться изменением класса или видимости с помощью js (пункт 5 правил для HTML)

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

3 Ко всем используемым в пороекте библиотекам должны прилагаться ссылки на документацию по ним.

4 В тексте js скриптов не должно содержаться никаких путей к изображениям или файлам.

5 Все стилизации с помощью js плагинов должны быть явными. Т.е. недопустимо чтобы например плагин стилизации поля select стилизовал ВСЕ селекты на страницы. Он должен обрабатывать только явно указанные с помощью классов селекты - например только select.js-select.

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

7 Функции инициализации не должны быть изолированы внутри анонимных функций. Еще раз никакие jQuery(".myclass").plagin(); не должны быть размещены вне функций, или внутри анонимных функций, в том числе внутри $.ready

8 Функции колбэков в методах .ready, .on, .bind, .click и так далее, не должны быть длинее 2 строк кода, каждая из которых не должна быть длинее 124 символов.

9 Все стилизации с помощью js плагинов должны быть явными. Т.е. недопустимо чтобы например плагин стилизации поля select стилизовал ВСЕ селекты на страницы. Он должен обрабатывать только явно указанные с помощью классов селекты - например только select.js-style (да, это то же самое что и пункт 5)

10 Если вы инициализируете плагин, постарайтесь чтобы он инициализировался один раз. То что на страницы 5 слайдеров не значит что нужно писать:

  $('.main-slider').slick({
    // параметры
  });

  $('.article-slider').slick({
    // параметры
  });
  // и так далее

так вполне подойдет:

document.querySelectorAll('[js-slider]').forEach((n)={
    let params = // считывание параметров из конфигурации
    $(n).slick(params);
});

но лучше вовсе не использовать jQuery, если на вашем календаре год больше 2015 (если меньше - покупайте биткоин).

Дополнение

Если какой-то пункт кажется невыполнимым или непонятным, обратитесь ко мне в телеграм: @madzhugin с вопросом о том как быть - я подскажу.

Прочие

1 Хорошо если изображения макета сгруппированы по каталогам.

2 Все изображения имитирующие контент должны быть помещены в отдельную папку samples!