Понимание методологии написания CSS – Hongkiat

Примечание редактора: эта статья является частью нашей серии «Оптимизация кода», в которой мы рассмотрим, как оптимизировать кодирование для повышения эффективности в стремлении стать лучшими программистами.

В этом посте мы рассмотрим, что такое методологии написания CSS, некоторые хорошо известные методологии и как они могут быть полезны для нас при оптимизации нашего CSS-кода. Давайте начнем с самого простого вопроса, чтобы начать игру. Что такое методология?

Методология – это система методов. Думайте о методе как о простом способе систематического выполнения чего-либо, заранее заданном способе выполнения действий для достижения желаемого результата.

Чтобы получить лучшие результаты, мы улучшаем наши методы, планируя их лучше, меняя порядок, упрощая шаги – все, что работает быстрее и эффективнее.

Методология CSS

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

Наши предпочтительные методы либо были разработаны самостоятельно с течением времени, либо под влиянием других, либо требовались на нашем рабочем месте, либо из-за всего вышеперечисленного. Но со временем ветераны CSS разработали методологии написания CSS, которые стали бы более гибкими, определенными, пригодными для повторного использования, понятными и управляемыми.

Мы рассмотрим эти сформулированные методологии, которые будут включать:

1. OOCSS (объектно-ориентированный CSS)
2. БЭМ (Блок, Элемент, Модификатор)
3. ACSS (атомарный CSS)
4. SMACSS (масштабируемая и модульная архитектура для CSS)

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

1. OOCSS

Разработано Николь Салливан в 2008 году ключевые концепции OOCSS (объектно-ориентированного CSS) включают CSS объект идентификация, разделение структуры и визуальных стилей, а также избегание стилей на основе местоположения.
В OOCSS самый первый шаг, который предлагает нам Николь, – это идентификация объектов в CSS.

«По сути, CSS-объект – это повторяющийся визуальный шаблон, который можно абстрагировать в независимый фрагмент HTML, CSS и, возможно, JavaScript. Затем этот объект можно повторно использовать на всем сайте. – Николь Салливан, Github (OOCSS)«

Возьмите для примера эту структуру с этого сайта. Вот что-то, что является повторяющимся визуальным шаблоном и имеет свой собственный независимый HTML и / или CSS:
У нас есть два типа объектов: больший предварительный просмотр заголовков, который мы назовем post-preview-primary и боковая панель с заголовками, которые мы назовем post-preview-primary.

Нам нужно разделить структуру и скин (то есть стили, которые создают внешний вид объектов). Два типа объектов имеют разные структуры, один из них находится в большем поле, хотя они выглядят одинаково, с изображениями слева и заголовками справа.

Давайте дадим изображениям обоих объектов класс post-preview-image и добавим код, который помещает изображение слева. Это избавляет нас от необходимости повторять код размещения изображения внутри объектов в CSS. Если есть другие подобные объекты, мы повторно используем post-preview-image для них.

Разделение кожи также может быть сделано для более простых стилей, таких как границы или фон. Если у вас есть несколько объектов с одинаковой синей рамкой, создание отдельного класса для синей рамки и добавление его к объектам уменьшит количество кодировок синих рамок в CSS.

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

Плюсы OOCSS:
Многоразовые коды визуального оформления, гибкие коды местоположения, сокращение глубинных вложенных селекторов.

Минусы OOCSS:
Без достаточного количества повторяющихся визуальных шаблонов разделение структур и визуальных стилевых кодов кажется ненужным.

2. БЭМ

Разработанные в Яндексе разработчиками в 2009 году, ключевые понятия для БЭМ (Блок, Элемент, Модификатор) включают определение блок, элемент & модификатор и называя их соответственно.
«Блок» по существу совпадает с «объектом» (из приведенного выше примера), «элемент» относится к компонентам блока (изображение, заголовок, текст предварительного просмотра в вышеупомянутых объектах предварительного просмотра после объектов). «Модификатор» может использоваться, когда изменяется состояние блока или элемента, например, когда вы добавляете активный класс в пункт меню, чтобы выделить его, активный класс действует как ваш модификатор.

После того как вы определили компоненты, назовите их соответствующим образом. Например:

• блок меню будет иметь меню класса
• его элементы будут иметь класс menu__item (блок и элемент разделены двойным подчеркиванием)
• модификатор для отключенного состояния меню может иметь класс menu_disabled (модификатор, ограниченный одним подчеркиванием)
• Модификатор для отключенного состояния пункта меню может быть menu__item_disabled.

Для модификаторов мы также можем использовать формат key_value для именования. Например, чтобы отличить любые пункты меню, которые ссылаются на устаревшие статьи, мы можем дать им класс menu__item_status_obsolete, а для стилизации любых пунктов меню, которые указывают на ожидающие документы, именем класса может быть menu__item_status_pending.

Наименование может быть изменено на то, что работает для вас. Идея состоит в том, чтобы иметь возможность идентифицировать блоки, элементы и модификаторы из имен классов. Проверьте некоторые из системы имен, перечисленных в Сайт БЭМ,

На сайте BEM также указано, как разделение блоков, элементов и модификаторов также может быть перенесено в файловую систему CSS. Такие блоки, как «кнопки» и «входы», могут иметь свои собственные папки, состоящие из файлов (.css, .js), которые связаны с этими блоками, что облегчает задачу импорта этих блоков в другие проекты.

Плюсы БЭМ: Простые в использовании имена классов и сокращение глубины CSS-селекторов.

Минусы БЭМ: чтобы сохранить названия в здравом уме, БЭМ советует, чтобы мы держали блок для вложения элементов поверхностно.

3. ACSS

Знаменитая Yahoo, где-то в конце первого десятилетия 21-го века, ключевые концепции ACSS состоят в создании классов на самом атомарном уровне стиля, то есть пары свойство-значение, с последующим их использованием в HTML по мере необходимости.
Трудно определить, когда ACSS (Atomic CSS) был впервые разработан, так как концепция уже давно используется. Разработчики давно используют такие классы, как .clearfix {overflow: hidden}. Идея в ACSS состоит в том, чтобы иметь класс для практически каждой повторно используемой не связанной с контентом пары свойство-значение, которая нам понадобится на нашем сайте, и добавлять эти классы при необходимости к элементам HTML.

Ниже приведен пример классов на основе ACSS и того, как они используются в HTML.

.mr-8 {margin-right: 8px;}
.Fl-р {поплавок: право;}

Как видите, с помощью этого метода количество классов возрастет, и все эти классы будут заполнены HTML. Этот метод не эффективен на 100%, но может быть полезен при желании. Yahoo использует это в конце концов.

Плюсы ACSS: стилизация HTML, не выходя из HTML.

Минусы ACSS: слишком много классов, не очень аккуратно, и вы можете ненавидеть это.

4. SMACSS

Разработано в 2011 году Джонатан Снук SMACSS (масштабируемая и модульная архитектура для CSS) работает путем определения 5 различных типов правил стиля. Имена классов и система регистрации создаются на их основе.

«SMACSS – это способ проверить ваш процесс проектирования и как способ приспособить эти жесткие рамки к гибкому мыслительному процессу. – Джонатан Снук »
SMACSS определяет 5 типов правил стиля, а именно: базовый, макет, модуль, состояние и тема.

• Базовые стили – это стили по умолчанию, направленные на основные теги HTML, такие как , ,
• Стили макета – это стили, используемые для определения макета страницы, например, кодирование, куда будут переходить верхнее, нижнее и нижнее меню.
• Стили модулей специфичны для таких модулей, как галерея или слайд-шоу.
• Стили состояний предназначены для выделения элементов с изменяемыми состояниями, такими как скрытый или отключенный.
• Тема используется для изменения визуальной схемы страницы.

Различные правила стиля можно идентифицировать, используя префикс в имени класса, например, l-header (для разметки) или t-header (для темы). Мы также можем организовать эти различные типы правил, поместив их в отдельные файлы и папки.

Плюсы SMACSS: лучше организованный код.

Минусы SMACSS:
Ни о чем я не могу думать.

Есть бесплатный онлайн книга Вы можете прочитать о SMACSS, или вы можете купить его электронная книга версия, чтобы изучить это больше.

Вывод

Вышеупомянутые методологии CSS предоставят вам систему для управления и оптимизации ваших CSS-кодов. Они могут быть объединены вместе, как OOCSS-SMACSS, или OOCSS-BEM, или BEM-SAMCSS, чтобы удовлетворить ваши потребности.

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