Архитектура CSS: масштабируемый и модульный подходы

По мере развития интернет-индустрии появляются подходы к работе с кодом для крупных веб-сайтов. Более чистый CSS — отличная отправная точка, но разработчики внешнего интерфейса могут поднять таблицу стилей сайта на другой уровень, применяя методологии, которые являются частью все более популярной масштабируемой архитектуры CSS.

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

Диагностика происхождения раздутого CSS

Если вы обнаружите какой-либо из следующих симптомов или недугов, то, по словам врача, вам нужно сделать модульную и более масштабируемую таблицу стилей. Чтобы понять, насколько плохи дела, найдите определенные свойства и посмотрите, что говорят цифры. В презентации Николь Салливан, « 5 главных ошибок массового CSS» , она предоставляет рубрику для диагностики корней переизбытка нескольких ключевых свойств:

• Большое количество поплавков означает, что существует неэффективная или несуществующая сетка.
• Большое количество полей означает, что вам нужен reset.css (или normalize.css ).
• Большое количество отступов означает, что параметры дизайна не являются явными, и поэтому многие разработчики много доработали детали.
• Большое количество размеров шрифта означает, что каскад не используется. Заголовки, вероятно, также скрыты в наборах правил с размером шрифта.
• Большое число! Важных означает, что это свойство используется для переопределения специфичности и, опять же, что каскад не используется.

Любое из этого звучит знакомо? Все в порядке, вы в хороших руках, потому что теперь, когда вы диагностировали происхождение вашего раздувания CSS, мы можем поговорить о некоторых надежных методах лечения.

Масштабируемый и модульный подходы: основы

Основные концепции различных масштабируемых подходов можно свести к двум основным методам:

1. Сокращение, повторное использование и переработка

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

Повторное использование включает создание общих классов вместо чрезмерно определенных и объединение классов для создания различных визуальных результатов.

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

2. Организовать, структурировать и проинформировать

Предоставление хорошей, хорошо организованной информации имеет решающее значение для ясности и понимания. Практики, перечисленные в первой статье , такие как предоставление информации для разработчиков в таблице стилей и создание структуры с точки зрения самого документа (путем классификации стилей в документе), играют роль в масштабируемых подходах. Однако разработчики могут добавить еще больше структуры, разбив категории стилей на несколько документов, указав структуру и значение с помощью соглашения об именах для повторно используемых классов и установив структуру страницы с помощью сеток. Руководства по стилю веб-сайта являются последним компонентом для обеспечения того, чтобы команда была хорошо информирована о стилях, структуре и номенклатуре.

Обзор масштабируемых и модульных подходов

Теперь, когда я представил ключевые концепции, давайте взглянем на конкретные практики, которые поддерживают эти концепции, через обзор самых известных и самых популярных подходов к работе с большими проектами CSS. Подходы, которые я расскажу, это СУХОЙ (не повторяйся) CSS, объектно-ориентированный CSS (OOCSS), масштабируемая и модульная архитектура для CSS (SMACSS) и CSS для взрослых.

СУХОЙ CSS

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

DRY CSS основан на буквальном понимании принципа « не повторяйся » при разработке программного обеспечения. Правильно: при кодировании CSS цель никогда не повторять пару свойство-значение. Когда-либо. Я знаю, это кажется довольно … ах, интенсивным , но это можно сделать.

Включите свою группу (так сказать)

Ядром DRY CSS является группировка, которая в своей основе влечет за собой структуру, организацию, сокращение и переработку. Джереми Кларк , который разработал DRY CSS, предлагает создавать группы селекторов с общими свойствами, а не повторять пары свойство-значение для каждого селектора в отдельности, как это обычно бывает при написании CSS. Хотя группа может иметь много селекторов, каждая пара свойство-значение определяется только один раз.

Группы на самом деле определяют общие свойства. С DRY CSS вы должны отказаться от глубоко укоренившейся привычки именования классов и идентификаторов, основанных на семантике, такой как, например, .alert-box. Вместо этого группы используют описательные имена, основанные на их внешнем виде или на их роли в дизайне, например, на «загнутых углах», но тогда все селекторы, имеющие это свойство, должны быть сгруппированы с этим стилем. Хотя это устраняет возможность смешивания и сопоставления, это уменьшает объем вашего кода.

<!-- media -->
	<div class="media">
	  <img class="fixedMedia" src="myimg.jpg" />
	 
	  <div class="text">
	...
	  </div>
	</div>

 /* ====== media ====== */
	.media {margin:10px;}
	.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
	.media .img {float:left; margin-right: 10px;}
	.media .img img{display:block;}
	.media .imgExt{float:right; margin-left: 10px;}

 .promo-box h2 { ... }

 .promo-box-h { ... }

 .promo-box { ... }

 .promo-box--light { ... }

 .margin-top {margin-top: 1em;}