Использование специальных CSS классов.
Наполнение сайта со скоростью света или как обойтись без программиста, решая 90% задач с использованием специальных CSS классов.
В каждом современном проекте, построенным по методологии (БЭМ, 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, foundation и т.д.) в проекте могут быть задействованы и другие классы, как правило они отображены на специальной странице style guide.
Теперь, зная всю мощь классов, вы можете обойтись без сторонней помощи и решать задачи, которые очень часто встречаются при наполнении сайта. В своих проектах мы частично используем bootstrap, пишем CSS код используя методологию БЭМ - пока нам все нравится, а тем кто испытывает трудности и хочет перемен, мы рекомендуем попробовать эту ядреную смесь бутстрапа и конечно же БЭМ.
