Представляем CCSS (Компонент CSS)

предсказуемый

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

Документация

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

Структура каталогов

Ниже приведен пример структуры каталогов для упрощения визуализации. Я также включил пример настройки в репозитории CCSS GitHub .

styles ├── bootstrap.css ├── ext │ ├── bootstrap │ │ ├── _settings.scss │ │ └── bootstrap.scss │ └── font-awesome │ └── font-awesome.scss ├── font-awesome.css ├── images.css ├── main.css └── scss ├── _config.scss ├── base │ ├── _animation-classes.scss │ ├── _base-classes.scss │ ├── _base.scss │ └── images.scss ├── components │ ├── directives │ │ ├── _empty-state.scss │ │ ├── _legend.scss │ │ └── _status-message.scss │ ├── pages │ │ ├── _404.scss │ │ └── _redirect.scss │ └── standard │ ├── _alarm-state.scss │ ├── _graph-message.scss │ └── _panel.scss ├── main.scss ├── mixins │ ├── _animation.scss │ ├── _bem.scss │ └── _icon.scss └── themes └── _light.scss 

Редактируйте / scss/ файлы только в папке scss/ в дереве папок, показанном выше. Это позволяет легко обновлять внешние библиотеки, которые находятся в папке ext/ . Многие приложения начинаются с внешнего CSS-фреймворка, такого как Bootstrap или Foundation, поэтому я добавил их в пример установки внутри ext/ . Но совершенно нормально, чтобы весь CSS был написан с нуля; все остальное, упомянутое выше, все еще применяется

Этот каталог components/ хорошо подходит для приложения AngularJS, но может быть настроен для других сред или приложений. Более подробная информация находится в разделе «Архитектура» ниже.

На странице HTML .css все файлы .css из папки style/ , которая содержит весь скомпилированный CSS (из Grunt, Compass и т. Д.). Никогда не изменяйте их.

Соглашения об именах — упрощенный БЭМ

• u-className — Глобальные базовые / служебные классы
• img-className — Глобальные классы изображений
• animate-className — Глобальные классы анимации
• ComponentName — Стандартные компоненты (B)
• ComponentName-elementName — Элемент компонента (E)
• ComponentName--modifierName компонента (M)

Обратите внимание на UpperCamelCase имени компонента UpperCamelCase чтобы указать, что это главный элемент; это означает, что это граница компонента . Имена элементов и модификаторов — elementName и modifierName соответственно. Не используйте дефис ( - ) для разделения имен компонентов, так как они означают начало имени элемента / элемента.

Архитектура и Дизайн

Давайте рассмотрим архитектуру, поддерживаемую CCSS.

хрюкать

Grunt — это отличный инструмент для выполнения задач, который может автоматизировать многие общие задачи (например, компиляцию CSS или проверку HTML). Есть и другие исполнители задач; идеальный рабочий процесс предполагает использование одного из них для просмотра разрабатываемых файлов и перекомпиляции CSS при внесении изменений.

Организация файлов

Посмотрите еще раз на структуру каталогов, которая является производной от SMACSS. Обратите внимание на каталог ext/ , который содержит все внешние фреймворки (например, Bootstrap). Для удобства обновления их не следует изменять; вместо этого переопределения и расширения должны быть помещены в каталог base/ .

base/ — это место, где вы храните глобальные базовые стили, которые используются во всем приложении.

_base.scss — это базовые стили только для селекторов элементов. Это своего рода «сброс CSS».

_base-classes.scss это все служебные классы, используемые во всем приложении для множества страниц, представлений и компонентов. Префикс имени класса с u-

 .ProductRating { // nested element @include e(title) { ... } // nested element @include e(star) { ... // nested element's modifier @include m(active) { ... } } } 

 .ProductRating { ... } // nested element .ProductRating-title { ... } // nested element .ProductRating-star { ... } // nested element's modifier .ProductRating-star--active { ... } 

 <div class="ProductRating"> <img alt="Company logo" class="img-logo"> <h3 class="ProductRating-title">Title</h3> <div class="u-starHolder"> <span class="ProductRating-star ProductRating-star--active"></span> <span class="ProductRating-star ProductRating-star--active"></span> <span class="ProductRating-star ProductRating-star--active"></span> <span class="ProductRating-star"></span> </div> </div>