oneClassLayout

oneClassLayout (Одноклассовая вёрстка).

Компилятор одноклассовой вёрстки. Одноклассовая вёрстка - один из способов снижения связанности стилей при вёрстке страницы, что делает вёрстку страницы простым и увлекательным занятием.

Откуда появилась одноклассовая вёрстка?

При вёрстке любой страницы возникает очень неприятная вешь - зависимости между классами. И чем объёмная вёрстка, тем больше зависимостей возникает между классами элементов.

Если вы используете в атрибуте class микс классов и по задумке какой-то класс из этого микса должен заменить ("перекрыть") другой класс, у вас появляется такая неприятная зависимость, как место указания класса в файле стилей, когда нижестоящие классы перекрывают вышестоящие классы.

Уйти от такой зависимости позволяет использование одного класса у элемента. Такой подход к вёрстке называется одноклассовая вёрстка. В такой вёрстке единственный класс, указанный у элемента, наследует свойства из файла стилей.

Рассмотрим вёрстку:

<div class="m1 m3 m2">Мой текст</div>

Отображение элемента создают сразу три класса: m1, m2 и .m3. Если хоть в одном из представленных классов одно свойство переопределяет другое, то будет важен порядок указания класса в файле стилей.

.m1 {color: red}
.m2 {color: green}
.m3 {color: black}

В данном примере фраза Мой текст будет отображена черным цветом, так как класс .m3 указан последним.

Выходом из такой ситуации будет использование у элемента одного класса, который будет наследовать свойства из файла стилей.

Предположим, что вы хотите изменить уже готовый элемент, а именно, изменить цвет шрифта.

<div class="m">Мой текст</div>

.m {
  border: 1px solid green;
  color: red;
}

Обычно, при изменение нового элемента на основе старого, к классу элемента добавляют класс, в котором новое свойство перекрывает старое, например, вот так:

<div class="m z">Мой текст</div>

.m {
  border: 1px solid green;
  padding: 10px;
  color: red;
}
.z {color: black}

При одноклассовой вёрстке новый элемент будет таким:

<div class="z">Мой текст</div>

.m, .z {
  border: 1px solid green;
  padding: 10px;
}
.m {color: red}
.z {color: black}

Класс .z ничего не переопределяет, а только добавляет новые свойства. Это основное правило одноклассовой вёрстки: одноклассовая вёрстка должна добавлять новые свойства стилей, а не переопределять. Обратите внимание, что мы сначала определили, что наш модификатор должен изменить и указали цвет шрифта отдельно для каждого варианта.

Теперь, чтобы поменять только цвет шрифта, не затрагивая другие стили элемента, достаточно поменять класс .z на класс .m. Отсюда и появилось название - одноклассовая вёрстка, т.е. элемент может содержать только один класс.

Имена классов.

В одноклассовой верстке имена классов строятся из одного или нескольких слов. Если при указании имени класса используется несколько слов, то между словами ставят знаки дефиса. Если класс у элемента заменяется динамически на другой класс (например, при помощи javascript), то такой класс называется модификаторм.

Классы, которые наследуют свойства базового класса, но добавляют свои стили, называются модификаторами.

Примеры базовых стилей и модификаторов, унаследованных от базовых стилей:

.panel {
  border: 1px solid green;
  color: red;
}

Теперь создадим для базового класса модификатор:

.panel, .panel_color-black {
  border: 1px solid green;
}
.panel {
  color: red;
}
.panel_color-black {
  color: black;
}

Упрощение наследования в одноклассовой вёрстке.

Вы можите использовать принцип одноклассовой вёрстки, как было показано в примере выше, не применяя каких-либо специальных методов. Я же предлагаю вам воспользоваться простым методом, который позволит наследовать код стилей, а также применять заимствованные стили.

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

.имя_класса[перечень_имен_наследуемых_классов] {св-ва_для_добавления_или_изменения_наследуемых_свойств_класса}

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

$ node compile.js

Давайте перепишем вышеприведённый код:

.m {
  border: 1px solid green;
  padding: 10px;
  color: red;
}
.z[.m] {color: black}

Здесь класс .z наследует все свойства класса .m, при этом, свойства, указанные в классе .z либо добавляются, либо заменяются при их совпадении. В итоге, применение класса .z на элементе, приведёт к тому, что текст будет показан черным цветом.

В скобках можно указывать множество классов, через запятую:

.z[.m,.p-all-3] {...}

Также можно заимствовать классы без добавления и изменения заимствованных свойств, для этого скобки {} нужно оставить пустыми.

Можно применять множественное последовательное наследование классов, когда следующий класс наследует предыдущий. Например:

.m {
  border' 1px solid green;
  padding: 10px;
  color: red;
}
.z[.m] {
  font-size: 2em;
}
.k[.z] {
  margin: 10px;
}

Класс .k, указанный самым последним, будет содержать все свойства классов .m, .z.

Заимствованные стили.

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

Файл templates.css содержит шаблоны стилей, которые во время компиляции могут быть скопированы в основной файл styles.css.

Указываются заимствованные стили точно также, как и было показано выше, используя квадратные скобки [] для обозначения заимствованных стилей классов.

Например, вы хотите стилизовать панель, но часть классов хотите заимствовать из файла заимствованных стилей:

.panel[.p-all-2, .c-1, .bc-1] {}

Классы, перечисленные, как заимствованные, будут взяты и унаследованы из файла templates.css.

Компиляция файлов стилей.

Итак, перед компиляцией стилей одноклассовой вёрстки необходимо подготовить файл styles.css для компиляции, а именно, внутри этого файла должны быть настройки для всего сайта, которые должны быть указаны в :root {}.

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

Также необходимо в виде значений в :root {} указать значения цветов, используемых на сайте.

Пример:

:root {
  /* Минимальная единица. */
  --side: 0.5em;

  --side-1: calc(var(--side) * 1);
  --side-2: calc(var(--side) * 2);
  --side-3: calc(var(--side) * 3);
  --side-4: calc(var(--side) * 4);
  --side-5: calc(var(--side) * 5);

  /* Цвета. */
  --color-1: #72DEC2;
  --color-2: #DE728E;
  --color-3: #C4DE72;
  --color-4: #8C72DE;
}