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

В этом посте мы увидим что такое методология написания 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:

У нас есть два типа объектов, больший предварительный просмотр названий, которые мы назовем после просмотра первичной и боковая панель с заголовками, которые мы назовем после предварительного просмотра и вторичного.

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

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

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

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

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

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

2. БЭМ

Ключевая концепция БЭМ (Блок, Элемент, Модификатор), разработанная в Яндексе в 2009 году, включает определение блок, элемент & модификатор и называть их соответственно.

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

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

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

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

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

Сайт БЭМ также содержит списки как разделение блоков, элементов и модификаторов также может быть перенесено в файловую систему CSS. Блоки как “кнопки” а также “входные” могут иметь свои собственные папки, состоящие из файлов (.css, .js), связанных с этими блоками, что облегчает задачу импорта этих блоков в другие проекты.

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

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

3. ACSS

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

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

Ниже приведен пример классов на основе ACSS и их использования в HTML..

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Как видите, с помощью этого метода количество классов возрастет, и все эти классы будут заполнены 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, таких как:

• OOCSS Framework
• БЭМ инструменты
• Органический CSS-фреймворк (следует атомной концепции).