Как я структурирую CSS / Хабр
Приветствую. Представляю вашему вниманию перевод статьи «How I Structure My CSS (for Now)», опубликованной 11 августа 2020 года автором Matthias Ott
Когда вопрос касается структурирования CSS, нет недостатка различных соглашений об именовании, методологий и архитектур. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS — за последние годы появилось много разных подходов к управлению модульным CSS. Одни предлагают стратегии разделения CSS на небольшие, лучше поддающиеся управлению фрагменты, другие больше сосредотачиваются на соглашениях об именовании классов. Порой сложно понять, в чём отличия или преимущества определённых методик, но у всех них, в конце концов, одна цель – обеспечить единую структуру и принципы при работе в команде с другими людьми или с самим собой в будущем.
Неудивительно, что в начале каждого нового проекта я обдумываю структуру CSS, а со временем выбранный способ организации и написания кода существенно меняется.
Самое большое изменение произошло, когда мы все начали писать CSS для компонентов. Хотя, и препроцессоры, такие как Sass, заметно на это повлияли.
В этой статье я поделюсь своим текущим принципом структурирования CSS. В нём я не придерживаюсь какой-либо определённой методологии, хотя те, кто знаком с ITCSS Гарри Робертса, определённо увидят сходства. Если вы ещё не знакомились с ITCSS, настоятельно рекомендую это сделать. Больше всего в этой методологии мне нравится прагматичный, полностью прикладной подход и принцип структурирования, делающий CSS всё более конкретным и явным по мере продвижения вниз по структуре. Это облегчает работу с каскадом и наследованием селектора, оставляя количество классов их специфичность на низком уровне. Существует, однако, и несколько отличий, и это именно то, что я предлагаю любому, кто создаёт свою собственную структуру: берите любую методологию и свободно адаптируйте её к своим потребностям и способу работы.
Структура основной папки
Вот так в данный момент выглядит структура моей папки.
Давайте разбираться
/scss/ ├── 1-settings ├── 2-design-tokens ├── 3-tools ├── 4-generic ├── 5-elements ├── 6-skeleton ├── 7-components ├── 8-utilities ├── _shame.scss └── main.scss
Настройки
Первая папка 1-settings предназначена для общих настроек проекта, самой базовой конфигурации. Это может быть набор глобальных переменных: Sass-переменных или CSS-переменных
├── 1-settings │ └── _global.scss
Дизайн-токены
Вторая папка предназначена для стилей, касающихся визуального оформления сайта. Мы всё ещё не пишем правила, предназначенные для стилизации разметки. Здесь мы определяем переменные для шрифта, цветов, отступов, медиа-запросов и всего остального, что будем использовать при вёрстке. Эти атрибуты визуального оформления принято называть «дизайн-токенами». Их значения могут быть взяты из дизайн-системы вашего проекта.
├── 2-design-tokens │ ├── _colors.scss │ ├── _fonts.scss │ ├── _media-queries.scss │ ├── _spacing.scss │ └── _typography.scss
scss
│ └── _typography.scssИнструменты
Папка «Tools» предназначена для ваших глобальных Sass-миксинов и функций. Возможно, вы захотите управлять цветами с помощью режимов смешивания (blend-mode) или установить соотношение сторон для элемента, содержащего видео? Или применить «clear» для каких-то float-элементов. Сам я не особо использую миксины, но знаю много людей, которые их любят.
├── 3-tools │ ├── _aspect-ratio.scss │ ├── _blend-modes.scss │ ├── _center.scss │ ├── _clearfix.scss │ └── _gradients.scss
Общие стили
Как и в методологии ITCSS, «generic» — первая папка, в которую помещаются стили для оформления разметки. Она содержит глобальные правила «box-sizing», сброс CSS или стили для печати — всё, что должно быть задано в самом начале CSS, но еще не зависит от конкретного проекта.
├── 4-generic │ ├── _box-sizing.scss │ ├── _font-face.scss │ ├── _normalize.scss │ └── _print.scss
Элементы
Теперь, когда базовые правила установлены, мы можем приступить к стилизации строительных блоков нашего интерфейса: основных элементов HTML.
В основном не используя классы, мы переопределяем основные стили браузера для оформления заголовков, кнопок, ссылок, списков и т.д., благодаря чему можем быть уверены, что все компоненты в проекте будут иметь одну и ту же базу.
├── 5-elements │ ├── _forms.scss │ ├── _headings.scss │ ├── _images.scss │ ├── _links.scss │ └── _lists.scss │ ├── ...
Скелет
Любой современный веб-проект, создаваемый с использованием компонентов, требует структуры, рассчитанной для этого: обёртки, контейнеры, гриды, всевозможные переиспользуемые объекты, которые образуют раскладку. Это скелет вашего сайта.
├── 6-skeleton │ ├── _grid.scss │ ├── _layouts.scss │ └── _objects.scss
Компоненты
Сердце проекта. Здесь мы разрабатываем компоненты интерфейса. В нескольких последних проектах я даже отделял большие модули и маленькие компоненты, но вместо этого можно просто вкладывать компоненты друг в друга. Если нравится, можете использовать префиксы и соглашение об именовании, такое как BEM.
Недавно я остановился на BEM-подобном, но более упрощённом соглашении об именовании. Суть в том, чтобы использовать как можно более простые, но информативные имена классов и разделять элементы и их содержимое чертой. Например, .card и .card-content. Иногда, когда я работаю с Fractal, CSS для отдельных компонентов может также находиться в другой папке вместе с HTML и JavaScript-кодом. В этом случае папка с компонентами может быть пустой или содержать @import@.
├── 7-components │ ├── _accordion.scss │ ├── _card.scss │ ├── _hero.scss │ ├── _pan-galactic-gargle-blaster.scss │ └── ...
Утилиты
Ещё одна папка? Да, но эта — последняя. Папка «utilities» содержит служебные и другие полезные классы и, самое главное, состояния и модификаторы, такие как .is-active или .visually-hidden. Эти стили переопределяют стили предыдущих слоёв и часто устанавливаются через JavaScript. Мне очень нравится предложение Andy Bell в его методологии CUBE CSS использовать data-атрибуты для изменения состояния компонентов, что также полезно с точки зрения большей специфичности.
├── 8-utilities │ ├── _modifiers.scss │ └── _states.scss
_shame.css
Этот файл является ещё одной идеей Harry Roberts и предназначен для всех постыдных CSS-решений, таких как быстрые фиксы и хаки, которые могут выступить временным решением, но позже должны быть реализованы как полагается. Обязательно документируйте все эти временные меры с помощью комментариев. Почему вы реализовали это именно так? Есть ли у вас идея, как сделать лучше? Что для этого нужно? И так далее.
Собираем всё вместе
Наконец, файл main.scss, собирающий все части воедино. Я предпочитаю явно импортировать каждый файл в отдельной строке вместо импорта всех папок, потому что это даёт больше контроля над последовательностью подключения. Но это, конечно, личное дело каждого.
@charset "UTF-8"; // 1. Settings @import "1-settings/global"; // 2. Design Tokens @import "2-design-tokens/colors", "2-design-tokens/fonts", "2-design-tokens/media-queries", "2-design-tokens/spacing", "2-design-tokens/typography"; .
..Вот и всё. Такая структура хорошо проявила себя в последних проектах, потому что помогает поддерживать порядок. Получаемый CSS также намного чище, что облегчает поиск нужного фрагмента кода, если нужно внести изменения или исправить ошибки.
На днях я делал опрос в Твиттер о предпочитаемой CSS-методологии:
Всем нравится использовать свой собственный CSS, и это здорово. Если вы используете методологию или структуру папок, которыми хотели бы поделиться, напишите об этом пост, и я с радостью дам ссылку на него здесь. Было бы интересно посмотреть, как вы структурируете свой CSS.
Итоговая структура папок:
/scss/ ├── 1-settings │ └── _global.scss ├── 2-design-tokens │ ├── _colors.scss │ ├── _fonts.scss │ ├── _media-queries.scss │ ├── _spacing.scss │ └── _typography.scss ├── 3-tools │ ├── _aspect-ratio.scss │ ├── _blend-modes.scss │ ├── _center.scss │ ├── _clearfix.scss │ └── _gradients.scss ├── 4-generic │ ├── _box-sizing.scss │ ├── _font-face.
scss
│ ├── _normalize.scss
│ └── _print.scss
├── 5-elements
│ ├── _forms.scss
│ ├── _headings.scss
│ ├── _images.scss
│ ├── _links.scss
│ ├── _lists.scss
│ └── ...
├── 6-skeleton
│ ├── _grid.scss
│ ├── _layouts.scss
│ └── _objects.scss
├── 7-components
│ ├── _accordion.scss
│ ├── _card.scss
│ ├── _hero.scss
│ ├── _pan-galactic-gargle-blaster.scss
│ └── ...
├── 8-utilities
│ ├── _modifiers.scss
│ └── _states.scss
├── _shame.scss
└── main.scssТаблица стилей CSS. Структура CSS правила. CSS значения и свойства. Комментарии в CSS.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. И первая публикация в этой рубрики будет посвящена CSS правилам, синтаксису CSS, CSS свойствам и их значениям, а также комментариям в CSS. На моем блоге вы можете найти две публикации, в которых я использовал для оформления каскадные таблицы стилей, но ничего практически не объяснял: Меню для сайта.
Горизонтальное CSS меню и Вертикальное выпадающее CSS меню. Горизонтальное выпадающее CSS меню.
Согласитесь, оформлять HTML документы при помощи HTML атрибутов неудобно, получается, что для каждого HTML элемента приходится задавать свои атрибуты, конечно для оформления HTML таблиц есть теги <col> и <colgroup>, но все же, это неудобно.
Хотелось бы как-нибудь объединить однотипные HTML элементы в одну группу и изменять их оформления не по отдельности, а сразу все вместе, например стили HTML заголовков или стили для HTML списков. Выход из этой ситуации есть – нужно просто использовать таблицу стилей CSS.
CSS селекторы позволяют объединять оформление нескольких HTML элементов, плюсы очевидны: уменьшается количество написанного кода, HTML страницы грузятся быстрее, увеличивается скорость оформления и изменения HTML документов. Согласитесь, удобно изменять стили всех заголовков на странице, просто изменив одну или две строки в таблице стилей CSS.
Основные правила CSS.
Содержание статьи:
- Основные правила CSS.
- Структура CSS правила. Синтаксис CSS. CSS значение и CSS свойство.
- CSS стили, правила. Синтаксис CSS, комментарии CSS. Приоритет CSS.
Таблица стилей CSS – это не решение всех проблем, которые связаны с оформлением HTML документов, более того, CSS не избавит вас от всех трудностей оформления, но таблица стилей позволяет упростить внесение изменений в HTML страницу.
Основной особенность CSS является то, что каскадная таблица стилей позволяет вносить изменение и применять определенные правила для каждого элемента сформированного браузером. Допустим, у нас есть HTML список, маркированный HTML список, который формируется при помощи тегов <ul> и <li>:
<ul> <li>Первый пункт</li> <li> Второй пункт </li> <li> Третий пункт </li> <li> Четвертый пункт </li> </ul>
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul>
<li>Первый пункт</li>
<li> Второй пункт </li>
<li> Третий пункт </li>
<li> Четвертый пункт </li>
</ul> |
Выглядит созданный HTML список примерно так:
Предположим, что мы хотим сделать оранжевым цвет текста каждого пункта HTML списка, в HTML для этих целей есть тег <font>, у которого есть атрибут color (цвета в HTML, таблица RGB):
<ul> <li<font color=»orange»> Первый пункт</font></li> <li><font color=»orange»> Второй пункт</font> </li> <li><font color=»orange»> Третий пункт</font> </li> <li><font color=»orange»> Четвертый пункт</font> </li> </ul>
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul>
<li<font color=»orange»> Первый пункт</font></li>
<li><font color=»orange»> Второй пункт</font> </li>
<li><font color=»orange»> Третий пункт</font> </li>
<li><font color=»orange»> Четвертый пункт</font> </li>
</ul> |
Так будет выглядеть HTML список после внесенных изменений:
Согласитесь, довольно нудно и долго писать для каждого пункта списка тег font и задавать атрибут color, хорошо, что в примере четыре пункта, а если их будет больше, а если через какое-то время мы захотим поменять цвет?
Для этого и существует таблица стилей CSS, но чтобы ваш код был эффективен, нужно знать нехитрые CSS правила.
CSS – это технология, которая позволяет вам создавать собственные правила отображения элементов на странице, эти правила легко и быстро можно изменять и применять их к любым элементам страницы. Теперь давайте вернемся к примеру и посмотрим, на сколько быстрее и проще можно изменить правила отображения элементов <li>. HTML страница будет выглядеть точно так же, как и в первом случае.
А оформление мы выносим в отдельный документ с расширением .css, css правила
li{ color:orange; }
li{
color:orange;
} |
Это CSS правило позволяет сделать текст всех элементов <li> на странице оранжевым. Более того, мы можем поменять цвет пунктов HTML списка, просто изменив одну строку и теперь нам не нужен тег <font> и его атрибуты.
Чтобы изменить цвет пунктов HTML списка, мы просто меняем правила CSS и все. Неплохо, да?
Структура CSS правила. Синтаксис CSS. CSS значение и CSS свойство.
Для представления, что такое CSS, нужно понять структуру CSS правила и знать CSS синтаксис. Любое CSS правило состоит из двух частей: CSS селектор, при помощи CSS селекторов мы задаем элементы, к которым хотим применить CSS правила и блок объявлений CSS, блок объявлений может состоят из одного или нескольких CSS объявлений. В свою очередь, каждое объявление состоит из двух частей: CSS свойство и значение CSS. Таким образом, мы приходим к выводу, что каскадная таблица стилей CSS состоит из набора CSS правил. Пример CSS правила:
На рисунке вы можете видеть, что все стили, которые мы хотим задать для нужного HTML элемента или группы элементов заключаются в фигурные скобки, перед которыми пишется CSS селектор. Внутри фигурных скобок размещаются CSS объявления: пара CSS свойство и CSS значение, между собой они разделяются двоеточием, после каждого объявления ставится точка с запятой.
Обратите внимание: у каждого CSS свойства имеется свой набор значений. Понятно, что цвет фона, заданный при помощи CSS свойства background-color, и цвет текста внутри элемента <li> будут применены к каждому элементу <li> HTML документа.
Теперь давайте поговорим о синтаксисе CSS. CSS нечувствителен к регистру символов, CSS нечувствителен к пробельным символам: переносам строк, табуляциям и пробелам; из всего вышесказанного следует, – форма записи CSS правил зависит только от желания разработчика, например:
LI{Color: red; list-Style:NONE;} p{ background:gray; botton-border: 1px; }
|
1 2 3 4 5 6 7 8 9 |
LI{Color: red; list-Style:NONE;}
p{
background:gray;
botton-border: 1px;
} |
То есть, вы можете писать все CSS свойства, CSS значения и правила в одну строку, так, как это записано для элемента <li>, а можете записывать каждое CSS объявление на новой строке.
Второй вариант мне нравится больше просто потому, что такой код проще редактировать, с другой стороны лишние пробельные символы увеличивают объем файла, в котором хранятся CSS правила.
CSS стили, правила. Синтаксис CSS, комментарии CSS. Приоритет CSS.
И так, чтобы ваши таблицы стилей корректно работали, а вы получали то, что вы хотите, а не то, что получается, необходимо знать CSS синтаксис, набор нехитрых правил. Для начала нужно сказать, что CSS стили для одного элемента можно задавать внутри одного CSS правила, а можно это сделать путем создания нескольких CSS правил для одного элемента.
menu{ color: #545ff3 list-style: none; display:inline; }
|
1 2 3 4 5 6 7 8 9 |
menu{
color: #545ff3
list-style: none;
display:inline;
} |
В данном случае мы задали CSS стили для тега <menu> внутри одного CSS правила.
table{color: orange;} table{border: 1px;} table{background: pink;}
table{color: orange;}
table{border: 1px;}
table{background: pink;} |
В данном случае мы создали несколько CSS правил для тега <table>, каждая пара CSS свойство и значение записана в отдельное CSS правило. Конечно, такая форма записи неудобна, приходится повторять CSS селектор и легко можно запутаться.
Теперь давайте поговорим о приоритете CSS правил и объявлений, допустим у нас на странице есть элемент <a>, ссылка. И для этого элемента существует следующее CSS правило:
a{ color: red; color:blue; }
|
1 2 3 4 5 6 7 |
a{
color: red;
color:blue;
} |
И как угадать, какого цвета будут ссылки в HTML документе? Очень просто, высший приоритет имеют CSS свойства, которые написаны ниже по коду.
На самом деле применятся оба CSS свойства, просто вначале цвет ссылок станет красным, а затем синим, в итоге мы увидим синие ссылки.
Обратите внимание: у каждого CSS свойства имеется строго определенный набор значений, которые они могут принимать.
Ну и напоследок мы поговорим о CSS комментариях, комментарии в CSS нужны для того, чтобы на время отключить CSS стили, разделить таблицу стилей на логические части, закомментировать для себя какой-то участок кода. Обычно комментарии используются только при разработке и отладке шаблонов и макетов, либо в учебных целях, поскольку CSS комментарии увеличивают объем кода, а соответственно и время загрузки файла с таблицей стилей.
CSS комментарии бывают только блочными и могут располагаться в любом месте документа с расширением .css:
/* CSS комментарий может располагаться и занимать несколько строк */ /* Стили для тега <menu> */ menu{ color: #545ff3; /* цвет текста */ list-style: none; /* убираем мерзкие маркеры */ display:inline; /* отображать элемент <menu>, как строчный */ }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* CSS комментарий может
располагаться и занимать несколько
строк */
/* Стили для тега <menu> */
menu{
color: #545ff3; /* цвет текста */
list-style: none; /* убираем мерзкие маркеры */
display:inline; /* отображать элемент <menu>, как строчный */
}
|
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.
ru. Не забываем комментировать и делиться с друзьями;)
Архитектура CSS — Структура папок и файлов | by Elad Shechter
Архитектура CSS — Часть 2
Чтение: 8 мин.·
3 июня 2019 г.Одной из важнейших вещей в каждом языке программирования является архитектура, т. е. то, как код делится на файлы и папки. Однако каким-то образом CSS остался в стороне, и многие разработчики не тратят время на то, чтобы должным образом спланировать его архитектуру.
Прежде чем мы начнем, несколько слов о том, кто я:
Меня зовут Элад Шехтер, и я работаю разработчиком уже 13 лет. Последние девять лет моей основной работой является архитектура CSS/HTML.
В этом посте я покажу свои рекомендации по определению архитектуры CSS, основанные на моем многолетнем опыте.
Примечание : в настоящее время правильный проект использует препроцессор CSS. В этом посте я буду использовать препроцессор SASS.
Этот пост я разделил на разделы, соответствующие основным элементам моей архитектуры.
Базовая структура моих проектов состоит из слоев конфигурации и слоев содержимого ; слой контента состоит из других слоев, основным из которых является частичный слой . Этот слой содержит элементов , компонентов , последовательностей и иногда сущностей .
Я создаю свои проекты, используя два основных файла: файл конфигурации и файл стилей содержимого. Файл конфигурации с именем _config.scss ссылается на все файлы конфигурации, а файл стилей содержимого с именем _local.scss ссылается на все папки и файлы внутри локальной папки.
Помимо того, что это разделение полезно для разделения задач, это разделение поможет вам создать архитектуру CSS, даже если у вас более одного веб-сайта. Архитектура для нескольких сайтов — это то, о чем я расскажу в следующем посте! Вы можете подписаться на меня в twitter или medium , чтобы быть в курсе, когда он будет опубликован.
main.scss соединяет оба этих файла.
Основная папка SASS:
sass/
|
|- framework/
|- _config.scss
|- _local.scss
|- main.scss
файл main.scss:
@import "config";
@импорт "местный";
На уровне конфигурации я определяю все свои переменные SASS/CSS и некоторые основные корневые определения.
Чтобы проект был хорошо сконструирован, я разделяю конфигурацию на более мелкие файлы в соответствии с их логической функцией.
Пример:
- Переменные CDN
- Цвета Переменные
- Переменные контрольных точек адаптивного дизайна
- Переменные языковой поддержки
- Основные слои Z-Index
- Другие переменные, которые не вписываются в другие части.
Я не могу вместить все типы конфигурации, поэтому, если вы видите, что в вашем проекте больше функций, разбейте их на большее количество файлов.
каркас/
|
|- конфиг/
| |- _common.scss
| |- _cdn.scss
| |- _colors.scss
| |- _directions.scss
| |- _breakpoints.scss
| |- _layers.scss
|
|- местный/
| |- Папки и файлы
|
|- _config.scss
|- _local.scss
|- main.scss
Слой содержимого, расположенный в _local.scss, , является основным содержимым ваших стилей, т. е. здесь вы должны разместить все свои стили .
Этот слой должен включать миксины SASS, CSS Normalize и CSS Resets, шрифты, значки, служебные классы CSS, общие сетки и частичные элементы.
каркас/
|
|- конфиг/
| |- конфигурационные файлы
|
|- местный/
| |- _mixins.scss
| |- _resets.scss // нормализация + сброс + типографика
| |- _fonts.scss
| |- _icons.scss // значки шрифтов/значки SVG
| |- _utilities.scss
| |- _grids.scss // общие макеты
| |- _partials.scss // элементы/компоненты/сущности/страницы
|
|- _config.
|- _local.scss
|- main.scss
scss Слой содержимого содержит стили, принадлежащие многим различным логическим частям, таким как сбросы, шрифты, значки и т. д. Даже если мы разделим его на минимальные количество файлов, мы могли бы получить до 7 или 8 файлов. В некоторых случаях их лучше разделить на еще более мелкие части, чтобы 9Файлы 0040 .sass никогда не становятся слишком большими, т. е. не более 50 строк, если вы пишете определения стиля в одной строке для каждого селектора, и не более 200 строк, если каждое определение занимает целую строку.
Вот несколько примеров:
Слой MixinsВид папки:
framework/
|
|- локальные/
|- |- примеси/
| | |- _trim.scss
| | |- _rotation.scss
| | |- _prevent-select.scss
| | |- _break-word.scss
| | |- _scrollbar.scss
| | |- _screen-reader.scss
| |- _mixins.scss
_mixins.scss:
@import "mixins/trim";
@import "примеси/поворот";
@import "mixins/prevent-select";
@import "mixins/break-word";
@import "примеси/полоса прокрутки";
@import "примеси/программа чтения с экрана";
Сбросить слой
Вид папки:
framework/
|
|- локальная/
|- |- сброс/
| | |- _normalize.
| | |- _reset.local.scss
| | |- _typography.scss
| |- _resets.scss
scss _resets.scss
/*resets*/
@import "сбрасывает/нормализует";
@import "resets/reset.local";
@import "сброс/типографика";
Я написал более подробный пост о сбросе CSS и нормализации CSS — «Нормализовать CSS или сброс CSS?!»
Слой Partials (_partials.scss)
_partials.scss является одним из основных файлов в слое _local.scss . Здесь я нахожу все компонентов , будь то маленькие, средние или большие.
каркас/
|
|- конфиг/
| |- файлы конфигурации
|
|- местный/
| ...
| |- _partials.scss // элементы/компоненты/сущности/страницы
|
|- _config.scss
|- _local.scss
|- main.scss
Из-за большого размера частичного слоя я делю его на меньшие логические внутренние слои, где-то между 3–5 файлами. Количество файлов может меняться между проектами или по вашему усмотрению .
На этом уровне порядок @imports имеет решающее значение, поскольку иногда существуют зависимости между базовыми слоями и слоями более сложных компонентов. Поскольку последовательность очень важна, я даю каждому основному слою номер префикса, который представляет его порядок важности, от наиболее общего до наиболее конкретного.
каркас/
|
|- местный/
| |- частичные/
| |- 1-элементный/
| |- 2-компонентный/
| |- 3-последовательности/
| |- 4 объекта/
| |- 5 страниц/
| |- _1-elements.scss
| |- _2-components.scss
| |- _3-sequences.scss
| |- _4-entities.scss
| |- _5-pages.scss
| |- _partials.scss // элементы/компоненты/сущности/страницы
_partials.scss:
// от самых общих к конкретным
@import "partials/1-elements";
@import "частичные/двухкомпонентные";
@import "частичные/3-последовательности";
@import "части/4 объекта";
@import "частично/5 страниц";
Как определить, где в слое _partials.
scss разместить свой стильПрежде чем размещать что-либо в слоях, помните, что значки, общие сетки, шрифты и служебные классы не принадлежат этому слою! Они находятся в предыдущих слоях.
Определения в этом слое делятся на несколько типов:Элементы- являются основными компонентами сети. На этот слой я помещаю все базовые стили, такие как стили для общей ссылки, общей кнопки, общие заголовки, стили форм, вкладок и все базовые стили, небольшие и самостоятельные.
Важно поместить каждую часть в отдельный файл. Таким образом, вы можете легко управлять этими базовыми стилями, не беспокоясь о том, что они могут повлиять на другие части CSS, когда вы захотите изменить эти стили.
Пример файла _1-elements.scss (часть _partials.scss)
/*common*/
@import "1-elements/common-links";
@import "1-элементы/заголовки";
@import "1-elements/common-popup";/*Кнопки*/
@import "1-elements/common-button";
@import "1-элементы/значок кнопки";
@import "1-элементы/вкладки-кнопки";
@import "1-элементы/кнопка-подсказка";/*формы*/
@import "1-элементы/выбрать-строку";
@import "1-элементы/формы";
@import "1-элементы/поиск";
@import "1-элементы/результат поиска";/*таблицы*/
@import "1-элементы/общая-таблица";
@import "1-элементы/таблица-резюме";
@import "1-элементы/ссылки на таблицы";
@import "1-elements/table-filtering";/*другое*/
@import "1-elements/system-alerts";
.
........ намного больше... (Разбить все (!) на мелкие части)
Компоненты- большие части. Я использую их для таких частей, как основной заголовок, основной нижний колонтитул, навигация, хлебные крошки и т. д. Иногда компонент не будет влиять на этот Элемент , а иногда будет, в соответствии с вашими потребностями: Если вы хотите, чтобы существующий элемент вел себя в компоненте по-другому, вы должны включить компонент после , определяющих элемент, чтобы в этом компоненте элемент получил свои новые конкретные определения. Как я уже писал ранее, когда я делю слой _partials.scss на эти основные слои, я добавляю номера префиксов в начале каждого слоя, чтобы указать, что между этими слоями есть зависимости. Таким образом мы обеспечиваем правильную работу каскадных стилей.
// от самого общего к конкретному
@import "partials/1-elements";
@import "частичные/двухкомпонентные";
@import "частичные/3-последовательности";
@import "частичные/четыре объекта";
@import "частично/5 страниц";
Последовательности- относятся к списку статей.
Обычно они появляются на новостных сайтах, в блогах или на любом сайте, на котором есть список материалов для чтения. Последовательности могут иметь частички, состоящие из элементов или компонентов внутри себя, подобно элементам в компонентах , о которых мы говорили ранее.
Партиалы сущностей и страниц
Во многих проектах есть партиалы, которые используют элемент, компонент или последовательность нестандартным образом. Например, в проекте с универсальным всплывающим окном может быть средство выбора даты, которое также использует всплывающее окно, но всплывающее окно средства выбора даты может в чем-то отличаться от общего. В этих случаях я использую один из двух подходов: объектов или страниц .
Entities- Я использую их при использовании элементов , компонентов или последовательностей , стили которых не совпадают на 100%.
Я добавляю еще одно имя класса к элементу, компоненту или последовательности — в дополнение к их классу элемента, компонента или последовательности — и это позволяет мне применять к ним разные стили. Имя класса начинается с ‘e-’ для представления объекта,
Мое практическое правило заключается в том, что вы можете добавить только один объект к элементу/компоненту/последовательности . Если есть другой случай такой сущности, отличной от родовой, лучше вместо этого создать другую сущность!
Пример:
common-popup e-datepicker-popup ">
Помимо этого, вы можете добавить столько служебных классов CSS, сколько захотите.
common-popup e-datepicker-popup u-hide ">
Страницы- Каждая страница вашего веб-сайта может быть объектом. В этом случае класс нужно добавить к элементу body или к основному элементу, который все оборачивает.
Имя класса должно начинаться с «9».0018 p-», например: « p-homepage » или « p-news » и т. д.…
Этот класс может влиять на каждый элемент, компонент, последовательность или сущность на странице.
По возможности лучше избегать этого подхода, но иногда в реальной жизни бывают такие случаи.
p-homepage ">
.ppt/slide_7.jpg)
д. Поэтому для написания эффективного кода CSS необходимо следовать соответствующей структуре.
Эта статья объяснит работу всех трех методов укладки с помощью примеров.
com