egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Продолжительность
0 ч 23 мин
Категория
CSS
Количество уроков
11 Видео
Дата добавления
14 нояб. 2019 г., 21:46
Язык
Английский
CSS использует глобальное пространство имен для селекторов CSS, которое может легко привести к конфликтам стилей во всем приложении при создании приложения с использованием современных веб-компонентов. Вы можете избежать этой проблемы, вложив CSS-селекторы или используя соглашение по стилю, такое как BEM, но это быстро усложняется и не масштабируется.
CSS-in-JS полностью устраняет эти проблемы, генерируя уникальные имена классов при преобразовании стилей в CSS. Это позволяет вам думать о стилях на уровне компонентов, не беспокоясь о стилях, определенных в других местах.
В этом курсе вы узнаете, как выразить популярные функции языка SCSS (Sass) с использованием новейших функций JavaScript. Мы преобразуем простые примеры из SCSS в CSS-in-JS. Как дизайнер или (S) CSS-разработчик, вы должны быть в состоянии следовать без обширных знаний JavaScript, хотя понимание SCSS требуется. Мы не будем использовать какие-либо конкретные библиотеки CSSinJS. Вместо этого мы сосредоточимся на базовых знаниях, которые вам понадобятся позже, если вы используете какую-либо библиотеку CSSinJS.
Посмотреть больше
-
Урок 1. 00:02:01Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
-
Урок 2. 00:02:06Import JavaScript Variables for Styling with CSS-in-JS
-
Урок 3. 00:02:17Import and Render Style Partials from JavaScript Modules with CSS-in-JS
-
Урок 4. 00:02:14Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations
-
Урок 5. 00:02:00Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
-
Урок 6. 00:01:38Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
-
Урок 7. 00:01:55Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator
-
Урок 8. 00:03:15Express CSS with JavaScript Objects for CSS-in-JS Notation
-
Урок 9. 00:01:55Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins
-
Урок 10. 00:03:40Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS
-
Урок 11. 00:00:58Style HTML with JavaScript Template Strings and Objects in CSS-in-JS
Автор - egghead
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
SASS: Полный курс (Препроцессор CSS)
SASS - The Complete SASS Course (CSS Preprocessor)
Если вы хотите узнать о самом популярном расширении CSS и создавать современные, красивые и реалистичные веб-сайты, то этот курс для вас. Курс охватывает все, что вам нужно знать об этой удивительной технологии. На протяжении всего курса вы встретите подробные объяснения о том, как работает SASS, а также познакомитесь с современными практиками и решениями.