Предзагрузка страницы

Использование специальных CSS классов.

image

В каждом современной проекте построенным по методологии (БЭМ, SMACSS и т.п.) присутствуют CSS классы, которые помогают легко отобразить желаемое визуальное представление в любом месте сайта, например: выделить текст, отобразить 2 блока в один ряд и т.д. или наоборот собрать полноценный компонент из наборов классов, получается что то вроде лего.

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

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

Текст

See the Pen Text by SLT Group (@sltgroup) on CodePen.

Цвет

See the Pen Colors by SLT Group (@sltgroup) on CodePen.

Таблица

See the Pen Table by SLT Group (@sltgroup) on CodePen.

Продолжать можно бесконечно, это была лишь малая часть того что предоставляет bootstrap. Обязательно посетите официальный сайт, там вы найдете больше примеров и документации к ним (bootstrap на русском). Помимо стороннего кода (bootstrap, foundation и т.д.) в проекте могут быть задействованы и другие классы, как правило они отображены на специальной странице style guide.

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