Как пользоваться css used
Перейти к содержимому

Как пользоваться css used

  • автор:

Практическое руководство по использованию CSS Modules в React приложениях

Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.

В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.

Проблема с каскадами

Давайте создадим повторно используемый компонент select в качестве примера, иллюстрирующего проблемы глобальных стилей. Стилизация элемента напрямую — это плохое решение, поскольку в других местах сайта нам может потребоваться или изначальный нестилизованный элемент, или совсем другая его стилизация. Вместо этого можно использовать синтаксис БЭМ для определения классов:

.select <> .select__item <> .select__item__icon <> .select--loading <>

Если бы новый класс item был создан без префикса select__, то у всей команды могли бы возникнуть проблемы, если бы кто-нибудь захотел использовать такое же имя item. При этом неважно, разработчик ли пишет CSS или же его генерирует какая-то утилита. Использование БЭМ помогает решить эту проблему, вводя контекст для элемента select.

Синтаксис БЭМ является шагом вперёд по направлению к компонентам, так как «Б» в БЭМ расшифровывается как «Блок», а блоки можно интерпретировать как легковесные компоненты. Select — это компонент, у которого есть различные состояния (select—loading) и потомки (select__item).

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

CSS Modules спешат на помощь

«CSS модуль» определяется следующим образом:

CSS модуль — это CSS файл, в котором все имена классов и анимаций имеют локальную область видимости по умолчанию.

Ключевая идея здесь — локальная область видимости.

Чтобы проиллюстрировать эту концепцию, давайте создадим JavaScript и CSS файлы компонента.

/* select.css */ .select <> .loading <> .item <> .icon <>
/* select.js */ import styles from "./select.css"; console.log(styles.select, styles.loading);

Это простой пример, который, однако, содержит много всего, происходящего за сценой.

Теперь CSS файл содержит намного меньше шума, чем в БЭМ версии, потому что в нём больше нет префиксов и специальных символов, задающих контекст. Почему же стало возможным удалить префикс .select—, не создавая при этом проблем?

Оператор import в JavaScript файле загружает CSS файл и конвертирует его в объект. В следующем разделе мы рассмотрим, как настроить рабочее окружение, позволяющее импортировать CSS файлы.

Каждое имя класса из CSS файла является свойством объекта. В примере выше это styles.select, styles.icon и т. д.

Если имя свойства — это имя класса, то какое же значение у этого свойства? Это уникальное имя класса, и уникальность обеспечивает то, что стили не «протекают» в другие компоненты. Вот пример хешированного имени класса: _header__1OUvt.

Вы можете подумать: «Какой ужас!» В чём смысл изменения осмысленного имени класса на непонятный хеш? Основная причина в том, что такой идентификатор гарантированно является уникальным в глобальном контексте. Позднее в этом руководстве мы изменим механизм создания идентификаторов, так что они будут иметь более осмысленный вид, но при этом останутся уникальными.

Вот ключевые преимущества использования CSS с локальной областью видимости:

  • шаг вперёд по направлению к модульным и повторно используемым компонентам без побочных эффектов,
  • более чистый CSS,
  • избегание монолитных CSS файлов, так как у каждого компонента будет свой файл со стилями.
  • сложнее читать и понимать DOM,
  • требуется некоторая начальная настройка окружения, чтобы заставить всё это работать.

Для простоты в этой статье мы остановимся на сборщике модулей Webpack и библиотеке React.

React, Webpack и CSS Modules

Для быстрого создания приложения можно использовать Create React App.

Следуя инструкциям в документации, мы создадим и запустим новый проект практически мгновенно.

npm install -g create-react-app create-react-app css-modules cd css-modules/ npm start 

Вуаля, и у нас работающее React приложение:

Начальная страница сообщает нам, что нужно редактировать файл App.js.

import React, < Component >from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component < render() < return ( 
className="App-logo" alt="logo" />

Welcome to React

To get started, edit and save to reload.

); > > export default App;

Используются ли CSS Modules в Create React App? Это можно узнать, взглянув на файл App.js. CSS файл импортируется, но не присваивается никакой переменной, при этом во всех атрибутах className используются строки вместо динамических значений.

С этой точки зрения Create React App не поддерживает CSS Modules, так что нужно изменить конфигурацию, чтобы включить эту поддержку.

Настройка Create React App для поддержки CSS Modules

Чтобы получить доступ к скрытому конфигу сборки, нужно выполнить команду eject. Внимание: если вы сделали это, то вернуться обратно вы уже не сможете.

npm run eject 

Теперь можно открыть папку с конфигами для webpack:

Create React App использует webpack для сборки, поэтому webpack.config.dev.js — тот самый файл, который нужно изменить (а также webpack.config.prod.js для настроек продакшна — прим. переводчика).

Найдём раздел, задающий, что делать с CSS файлами (в оригинальной статье используется старый синтаксис конфигов webpack, здесь же я использовал новый — прим. переводчика):

< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), ], >, >, ], >,

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

< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), require('postcss-modules-values'), ], >, >, ], >,

Что делают эти загрузчики loaders? В файле webpack.config есть закомментированная секция, описывающая загрузчики стилей и CSS:

postcss-loader применяет autoprefixer к CSS.
style-loader преобразовывает CSS в JS модули, которые инжектят теги .
css-loader разрешает пути в CSS и добавляет ресурсы как необходимые зависимости.

Опция modules: true в настройках css-loader включает поддержку CSS Modules. Параметр localIdentName изменяет шаблон имени класса таким образом, что оно включает в себя имя компонента React, имя класса и уникальный хеш-идентификатор. Это позволит производить отладку намного легче, потому что легко можно идентифицировать все компоненты.

Использование CSS Modules в React

Можно проверить, что конфигурация работает, добавив вызов console.log после оператора import.

Заменяя import ‘./App.css’; на

import styles from './App.css'; console.log(styles); 

мы получаем следующий вывод в консоль браузера:

Сейчас классы уникальны, но они не используются в React компонентах. Нужно сделать ещё два шага, чтобы применить стили к React компонентам. Во-первых, нужно изменить имена классов согласно camelCase нотации. Во-вторых, нужно изменить атрибуты className так, чтобы они использовали импортированные классы.

Использовать camelCase нотацию необязательно, но при доступе к классам из JavaScript легче писать styles.componentName, чем styles[«component-name»].

Исходный файл стилей выглядит так:

.App < text-align: center; >.App-logo < animation: App-logo-spin infinite 20s linear; height: 80px; >.App-header < background-color: #222; height: 150px; padding: 20px; color: white; >.App-intro < font-size: large; >@keyframes App-logo-spin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>

Больше нет необходимости в префиксах App, поэтому сейчас хороший момент, чтобы удалить их тоже. Модифицированный CSS будет выглядеть так:

.app < text-align: center; >.logo < animation: logoSpin infinite 20s linear; height: 80px; >.header < background-color: #222; height: 150px; padding: 20px; color: white; >.intro < font-size: large; >@keyframes logoSpin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>

Следующий шаг — изменить использование классов в компоненте. Результат будет следующим:

import React, < Component >from 'react'; import logo from './logo.svg'; import styles from './App.css'; class App extends Component < render() < return ( 
>
> className= < styles.logo >alt="logo" />

Welcome to React

> To get started, edit and save to reload.

); > > export default App;

Теперь наш компонент использует CSS Modules.

Как нарушить границы CSS модуля, когда это необходимо

Подход, описанный в предыдущем разделе, является основным для React проектов, но разработчики обычно быстро обнаруживают, что им нужен способ выделять и использовать общие стили. В этом контексте «общие» значит лишь то, что компонент должен наследовать что-то от базовых стилей.

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

CSS Modules дают возможность композиции с помощью ключевого слова from. Композиция возможна и между классами из разных файлов.

В следующем примере имеется два файла: один для базовых стилей кнопки и второй для реализации кнопки Submit. Можно сказать, что класс submitButton должен быть представлен через композицию базовых стилей кнопки и некоторых дополнительных свойств.

/* base_button.css */ .baseButton < border: 2px solid darkgray; background-color: gray; >/* submit_button.css */ .submitButton < composes: baseButton from "./base_button.css"; background-color: blue; >

Если есть необходимость в использовании переменных, то можно использовать или препроцессор, например, SASS или Less, или настроить поддержку переменных в webpack.

Пример из документации webpack по переменным в CSS:

/* variables.css */ @value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value blue, red, green from colors; .button

Этот пример можно изменить, используя собственные имена переменных. Это нужно потому, что переопределение стандартных значений, таких как blue, делает CSS файл менее понимаемым, так как больше нельзя быть уверенным, было ли переопределено какое-то значение или нет.

/* variables.css */ @value customBlue: #0c77f8; @value customRed: #ff0000; @value customGreen: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value customBlue, customRed, customGreen from colors; .button

Заключение

В этом руководстве мы начали с рассмотрения проблем глобального CSS, затем увидели, как CSS Modules улучшают ситуацию, вводя область видимости CSS и заставляя нас думать в терминах компонентов. Также мы рассмотрели, как легко можно начать экспериментировать с CSS Modules, используя React Starter Kit.

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

Если вы использовали CSS Modules в своих проектах, я (то есть, автор оригинальной статьи — прим. переводчика) хотел бы услышать о вашем опыте!

→ Публикация — свободный перевод статьи «Practical Guide to React and CSS Modules». Автор статьи Tatu Tamminen
→ Исходный код можно найти в react-cssmodules-demo
→ Также заслуживает внимания CSS Modules Webpack Demo

Как пользоваться css used

В настоящее время только Dart Sass поддерживает @use . Пользователи других реализаций должны использовать правило @import rule вместо этого.

Правило @use загружает миксины, функции и переменные из других таблиц стилей Sass и объединяет CSS из нескольких таблиц стилей вместе. Таблицы стилей, загруженные с помощью @use , называются «модулями». Sass также предоставляет встроенные модули, полные полезных функций.

Простейшее правило @use записывается как @use «» , которое загружает модуль по заданному URL. Любые стили, загруженные таким образом, будут включены ровно один раз в скомпилированный вывод CSS , независимо от того, сколько раз эти стили загружались.

⚠️ Внимание!

Правила таблицы стилей @use должны стоять перед любыми правилами, кроме @forward , включая правила стилей. Однако вы можете объявить переменные перед правилами @use , которые будут использоваться при настройке модулей.

SCSS Syntax

// foundation/_code.scss code  padding: .25em; line-height: 0; > 
// foundation/_lists.scss ul, ol  text-align: left; & &  padding:  bottom: 0; left: 0; > > > 
// style.scss @use 'foundation/code'; @use 'foundation/lists'; 

Sass Syntax

// foundation/_code.sass code padding: .25em line-height: 0 
// foundation/_lists.sass ul, ol text-align: left & & padding: bottom: 0 left: 0 
// style.sass @use 'foundation/code' @use 'foundation/lists' 

CSS Output

code  padding: .25em; line-height: 0; > ul, ol  text-align: left; > ul ul, ol ol  padding-bottom: 0; padding-left: 0; > 

Загрузка участников permalink Загрузка участников

Вы можете получить доступ к переменным, функциям и миксинам из другого модуля, написав . , .() или @include .() . По умолчанию пространство имен — это только последний компонент URL -адреса модуля.

Участники (переменные, функции и миксины), загруженные с помощью @use , видны только в таблице стилей, которая их загружает. Другим таблицам стилей потребуется написать свои собственные правила @use , если они также хотят получить к ним доступ. Это помогает легко определить, откуда каждый участник. Если вы хотите загрузить участников из многих файлов одновременно, вы можете использовать правило @forward , чтобы перенаправить их всех из одного общего файла.

�� Интересный факт:

Поскольку @use добавляет пространства имен к именам участников, можно безопасно выбирать очень простые имена, такие как $radius или $width , при написании таблицы стилей. Это отличается от старого правила @import , которое поощряло пользователей писать длинные имена, такие как $mat-corner-radius , чтобы избежать конфликтов с другими библиотеками, и это помогает сохранять ваши таблицы стилей ясными и удобными для чтения!

SCSS Syntax

// src/_corners.scss $radius: 3px; @mixin rounded  border-radius: $radius; > 
// style.scss @use "src/corners"; .button  @include corners.rounded; padding: 5px + corners.$radius; > 

Sass Syntax

// src/_corners.sass $radius: 3px @mixin rounded border-radius: $radius 
// style.sass @use "src/corners" .button @include corners.rounded padding: 5px + corners.$radius 

CSS Output

.button  border-radius: 3px; padding: 8px; > 

Выбор пространства имен permalink Выбор пространства имен

По умолчанию пространство имен модуля — это только последний компонент его URL без расширения файла. Однако иногда вам может потребоваться выбрать другое пространство имен — вы можете захотеть использовать более короткое имя для модуля, на который вы много ссылаетесь, или вы можете загружать несколько модулей с одним и тем же именем файла. Вы можете сделать это, написав @use «» как .

SCSS Syntax

// src/_corners.scss $radius: 3px; @mixin rounded  border-radius: $radius; > 
// style.scss @use "src/corners" as c; .button  @include c.rounded; padding: 5px + c.$radius; > 

Sass Syntax

// src/_corners.sass $radius: 3px @mixin rounded border-radius: $radius 
// style.sass @use "src/corners" as c .button @include c.rounded padding: 5px + c.$radius 

CSS Output

.button  border-radius: 3px; padding: 8px; > 

Вы даже можете загрузить модуль без пространства имен, написав @use «» as * . Однако мы рекомендуем делать это только для таблиц стилей, написанных вами; в противном случае они могут ввести новых участников, что вызовет конфликты имен!

SCSS Syntax

// src/_corners.scss $radius: 3px; @mixin rounded  border-radius: $radius; > 
// style.scss @use "src/corners" as *; .button  @include rounded; padding: 5px + $radius; > 

Sass Syntax

// src/_corners.sass $radius: 3px @mixin rounded border-radius: $radius 
// style.sass @use "src/corners" as * .button @include rounded padding: 5px + $radius 

CSS Output

.button  border-radius: 3px; padding: 8px; > 

Частные участники permalink Частные участники

Как автор таблицы стилей вы можете не захотеть, чтобы все определяемые вами участники были доступны за пределами вашей таблицы стилей. Sass упрощает определение закрытого участника, начав его имя с символа — или _ . Эти участники будут работать как обычно в таблице стилей, которая их определяет, но они не будут частью общедоступного API модуля. Это означает, что таблицы стилей, загружающие ваш модуль, не могут их видеть!

�� Интересный факт:

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

SCSS Syntax

// src/_corners.scss $-radius: 3px; @mixin rounded  border-radius: $-radius; > 
// style.scss @use "src/corners"; .button  @include corners.rounded; // Это ошибка! $-radius не отображается за пределами `_corners.scss`. padding: 5px + corners.$-radius; > 

Sass Syntax

// src/_corners.sass $-radius: 3px @mixin rounded border-radius: $-radius 
// style.sass @use "src/corners" .button @include corners.rounded // Это ошибка! $-radius не отображается за пределами `_corners.scss`. padding: 5px + corners.$-radius 

Конфигурация permalink Конфигурация

Таблица стилей может определять переменные с помощью флага !default , чтобы сделать их настраиваемыми. Чтобы загрузить модуль с конфигурацией, напишите @use с (: , : ) . Настроенные значения заменят значения переменных по умолчанию.

SCSS Syntax

// _library.scss $black: #000 !default; $border-radius: 0.25rem !default; $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; code  border-radius: $border-radius; box-shadow: $box-shadow; > 
// style.scss @use 'library' with ( $black: #222, $border-radius: 0.1rem ); 

Sass Syntax

// _library.sass $black: #000 !default $border-radius: 0.25rem !default $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default code border-radius: $border-radius box-shadow: $box-shadow 
// style.sass @use 'library' with ($black: #222, $border-radius: 0.1rem) 

CSS Output

code  border-radius: 0.1rem; box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); > 

С миксинами permalink С миксинами

Настройка модулей с помощью @use . with может быть очень удобной, особенно при использовании библиотек, которые изначально были написаны для работы с правилом @import . Но он не особенно гибкий, и мы не рекомендуем его для более сложных случаев использования. Если вы обнаружите, что хотите настроить сразу несколько переменных, передать [карты]]maps в качестве конфигурации или обновить конфигурацию после загрузки модуля, подумайте о написании миксина для установки ваших переменных вместо этого и другого миксина для внедрения ваших стилей.

SCSS Syntax

// _library.scss $-black: #000; $-border-radius: 0.25rem; $-box-shadow: null; /// Если пользователь настроил `$-box-shadow`, возвращает их настроенное значение. /// В противном случае возвращает значение, производное от `$-black`. @function -box-shadow()  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15)); > @mixin configure($black: null, $border-radius: null, $box-shadow: null)  @if $black  $-black: $black !global; > @if $border-radius  $-border-radius: $border-radius !global; > @if $box-shadow  $-box-shadow: $box-shadow !global; > > @mixin styles  code  border-radius: $-border-radius; box-shadow: -box-shadow(); > > 
// style.scss @use 'library'; @include library.configure( $black: #222, $border-radius: 0.1rem ); @include library.styles; 

Sass Syntax

// _library.sass $-black: #000 $-border-radius: 0.25rem $-box-shadow: null /// Если пользователь настроил `$-box-shadow`, возвращает их настроенное значение. /// В противном случае возвращает значение, производное от `$-black`. @function -box-shadow() @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15)) @mixin configure($black: null, $border-radius: null, $box-shadow: null) @if $black $-black: $black !global @if $border-radius $-border-radius: $border-radius !global @if $box-shadow $-box-shadow: $box-shadow !global @mixin styles code border-radius: $-border-radius box-shadow: -box-shadow() 
// style.sass @use 'library' @include library.configure($black: #222, $border-radius: 0.1rem) @include library.styles 

CSS Output

code  border-radius: 0.1rem; box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); > 

Переназначение переменных permalink Переназначение переменных

После загрузки модуля вы можете переназначить его переменные.

SCSS Syntax

// _library.scss $color: red; 
// _override.scss @use 'library'; library.$color: blue; 
// style.scss @use 'library'; @use 'override'; @debug library.$color; //=> blue 

Sass Syntax

// _library.sass $color: red 
// _override.sass @use 'library' library.$color: blue 
// style.sass @use 'library' @use 'override' @debug library.$color //=> blue 

Это работает, даже если вы импортируете модуль без пространства имен, используя as * . Присвоение имени переменной, определенной в этом модуле, перезапишет ее значение в этом модуле.

⚠️ Внимание!

Встроенные переменные модуля (например, math.$pi ) нельзя переназначить.

Поиск модуля permalink Поиск модуля

Было бы неинтересно выписывать абсолютные URL -адреса для каждой загружаемой таблицы стилей, поэтому алгоритм поиска модуля Sass делает это немного проще. Во-первых, вам не нужно явно указывать расширение файла, который вы хотите загрузить; @use «variables» автоматически загрузит variables.scss , variables.sass или variables.css .

⚠️ Внимание!

Чтобы таблицы стилей работали в любой операционной системе, Sass загружает файлы по URL , а не по пути к файлу. Это означает, что вам нужно использовать косую черту, а не обратную, даже в Windows.

Загрузка путей permalink Загрузка путей

Все реализации Sass позволяют пользователям указывать пути загрузки: пути в файловой системе, которые Sass будет искать при поиске модулей. Например, если вы передаете node_modules/susy/sass в качестве пути загрузки, вы можете использовать @use «susy» для загрузки node_modules/susy/sass/susy.scss .

Однако модули всегда будут загружаться в первую очередь относительно текущего файла. Пути загрузки будут использоваться только в том случае, если не существует относительного файла, соответствующего URL -адресу модуля. Это гарантирует, что вы не сможете случайно испортить относительный импорт при добавлении новой библиотеки.

�� Интересный факт:

В отличие от некоторых других языков, Sass не требует, чтобы вы использовали ./ для относительного импорта. Относительный импорт всегда доступен.

Составляющие permalink Составляющие

По соглашению, файлы Sass, которые предназначены только для загрузки в виде модулей, а не компилируются сами по себе, начинаются с _ (как в _code.scss ). Они называются частичными, и они говорят инструментам Sass не пытаться скомпилировать эти файлы самостоятельно. Вы можете не использовать символ _ при импорте частичного файла.

Индексные файлы permalink Индексные файлы

Если вы напишете _index.scss или _index.sass в папке, индексный файл будет загружен автоматически, когда вы загрузите URL -адрес самой папки.

SCSS Syntax

// foundation/_code.scss code  padding: .25em; line-height: 0; > 
// foundation/_lists.scss ul, ol  text-align: left; & &  padding:  bottom: 0; left: 0; > > > 
// foundation/_index.scss @use 'code'; @use 'lists'; 
// style.scss @use 'foundation'; 

Sass Syntax

// foundation/_code.sass code padding: .25em line-height: 0 
// foundation/_lists.sass ul, ol text-align: left & & padding: bottom: 0 left: 0 
// foundation/_index.sass @use 'code' @use 'lists' 
// style.sass @use 'foundation' 

CSS Output

code  padding: .25em; line-height: 0; > ul, ol  text-align: left; > ul ul, ol ol  padding-bottom: 0; padding-left: 0; > 

Загрузка CSS permalink Загрузка CSS

Помимо загрузки файлов .sass и .scss , Sass может загружать простые старые файлы .css files.

SCSS Syntax

// code.css code  padding: .25em; line-height: 0; > 
// style.scss @use 'code'; 

Sass Syntax

// code.css code  padding: .25em; line-height: 0; > 
// style.sass @use 'code' 

CSS Output

code  padding: .25em; line-height: 0; > 

Файлы CSS , загружаемые в виде модулей, не поддерживают никаких специальных функций Sass и поэтому не могут предоставлять какие-либо переменные, функции или миксины Sass. Чтобы гарантировать, что авторы случайно не напишут Sass в своем CSS , все функции Sass, которые также не являются корректным CSS , будут вызывать ошибки. В противном случае CSS будет отображаться как есть. Его можно даже расширить!

  • Текущие релизы:
  • Dart Sass1.49.0
  • LibSass3.6.5
  • Ruby Sass ⚰
  • Руководство по внедрению

Sass © 2006–2022 команда Sass и многочисленные участники. Он доступен для использования и модификации по лицензии MIT .

Изучайте CSS

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Добро пожаловать на курс «Изучайте CSS»!

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

Вы изучите основы CSS, такие как блочная модель, каскад и специфичность, адаптируемый блок flexbox, двумерная сетка grid и свойство z-index. И, наряду с этими основами, вы узнаете о функциях, цветовых типах, градиентах, логических свойствах и наследовании, чтобы стать всесторонним разработчиком интерфейсов, готовым взяться за любой пользовательский интерфейс.

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

Этот курс создан как для начинающих, так и для опытных разработчиков CSS. Вы можете пройти всю серию от начала до конца, чтобы получить общее представление о CSS, или использовать курс в качестве справочника по конкретным темам веб-дизайна. Тем, кто только начинает заниматься веб-разработкой, рекомендует ознакомиться с курсом «Введение в HTML» от MDN, чтобы узнать всё о том, как писать разметку и связывать таблицы стилей.

Box Model

 

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

Selectors

To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module.

The cascade

Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.

Specificity

This module takes a deeper look at specificity, a key part of the cascade.

Inheritance

Some CSS properties inherit if you don’t specify a value for them. Find out how this works, and how to use it to your advantage in this module.

Color

There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values.

Sizing Units

In this module find out how to size elements using CSS, working with the flexible medium of the web.

Layout

An overview of the various layout methods you have to choose from when building a component or page layout.

Flexbox

Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.

Grid

CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer.

Logical Properties

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.

Spacing

Find out how to select the best method of spacing elements, taking into consideration the layout method you are using and component that you need to build.

Pseudo-elements

A pseudo-element is like adding or targeting an extra element without having to add more HTML. They have a variety of roles and you can learn about them in this module.

Pseudo-classes

Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.

Borders

A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS.

Shadows

There are a number of ways to add shadows to text and elements in CSS. In this module you’ll learn how to use each option, and the tasks they were designed for.

Focus

Understand the importance of focus in your web applications. You’ll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate.

Z-index and stacking contexts

In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context.

Functions

CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.

Gradients

In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an image using a graphics application.

Animations

Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module find out how to add and control animation effects with CSS.

Filters

Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available.

Blend Modes

Create compositional effects by mixing two or more layers, and learn how to isolate an image with a white background in this module on blend modes.

Lists

A list, structurally, is composed of a list container element filled with list items. In this module, you’ll learn how to style all the parts of a list.

Transitions

In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.

Overflow

Overflow is how you deal with content that doesn’t fit in a set parent size. In this module, you’ll think outside the box, and learn how to style overflowing content.

Backgrounds

In this module learn the ways you can style backgrounds of boxes using CSS.

Text and typography

In this module, learn how to style text on the web.

Conclusion and next steps

Further resources to help you take your next steps.

Итак, вы готовы изучить CSS? Приступим.

Note: Этот курс написан и отредактирован экспертами сообщества CSS: Энди Беллом, Рэйчел Эндрю, Уной Кравец, Адамом Аргайлом, Эммой Тверски, Кэмден Бикель и Кевином Лозандье. Роб Додсон и Дживун Ли руководили UX и производственной сборкой, им также помогали Ева Гасперович и Кейси Баски.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2021-05-04 UTC.

Как работает CSS

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

Необходимые знания: Основы компьютерной грамотности, базовое программное обеспечение, умение умение работать с файлами и начальные знания HTML (рекомендуется изучить Введение в HTML).
Задача: Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили

Как работает CSS?

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

  1. Браузер получает HTML-страницу (например, из Интернета)
  2. Преобразует HTML в DOM (Document Object Model). DOM (или DOM-дерево) — это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.
  3. Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео . и стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.
  4. После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)
  5. Дерево представления (render tree) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.
  6. Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)

Диаграмма демонстрирует этот процесс.

DOM-дерево

DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится DOM node (en-US) в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.

Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.

Как представлено DOM-дерево

Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.

Возьмём следующий пример:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 

В DOM-дереве узел, соответствующий элементу

, — это родительский элемент. Его дочерние элементы — текст и три элемента . Узлы SPAN также будут родителями — с текстом в качестве дочерних элементов:

P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:

p  margin: 0; > 

Добавление CSS в DOM

Допустим, мы добавили таблицу стилей к нашему примеру:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 
span  border: 1px solid black; background-color: lime; > 

Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило, браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов . После этого информация будет отображена на экране.

В статье Отладка CSS мы будем использовать браузер DevTools для отладки CSS.

Что происходит, когда браузер не понимает CSS?

В предыдущем уроке я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?

— Да ничего: браузер просто пропустит это!

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

Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.

Ниже я использовал британское написание слова color, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.

p>I want this text to be large, bold and blue.p> 
p  font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; > 

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

Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции calc() , равной 100% — 50px . Старые браузеры используют пиксельное значение, потому что не распознают calc() . Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

.box  width: 500px; width: calc(100% - 50px); > 

Завершение

Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в использовании ваших новых знаний.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *