Upload
Андрей Ситник
•
1 like
•
914 views
CodeFest
Follow
Изолируем компоненты в CSS
Read less
Read more
Report
Share
Report
Share
1 of 59
Download now
Download to read offline
More Related Content
Андрей Ситник
1.
1 Изоляция CSS Андрей Ситник,
Злые Марсиане
2.
2 Злые марсианеЗлые марсианеЗлые
марсиане Злые марсиане
3.
3 Работали над
4.
4 Наш опенсорс
5.
5 Глава 1Глава 1Глава
1 Глава 1 ПроблемаПроблемаПроблема Проблема
6.
6 Зачем нам ИТ?Зачем
нам ИТ?Зачем нам ИТ? Зачем нам ИТ?
7.
7 Рост сложности 3 объекта
6 объектов 3 связи 15 связей
8.
8 Решение роста
9.
9 Программирование —Программирование — контроль
сложностиконтроль сложности
10.
10 Компоненты сети
11.
11 Компоненты ОС systemctl systemd Core manager
service socket mount systemd snapshot path targettimer swap unit multiseat inhibit pamsession login namespace cgroup log dbus systemd Libraries Linux Kernel systemd Targets systemd Utilities notify analyze cgls cgtop loginctljournalctl nspawn dbus-1 libpam libcap libcryptsetup tcpwrapper libaudit libnotify basic reboot bootmode shutdown dbus telephony logind multi-user dlog user- sesssion graphical display service user-session tizen service systemd Daemons logind journald systemd session cgroups autofs kdbus networkd
12.
12 Компоненты JavaScript import React
from 'react'; import Logo from '../logo'; export const Header = () => ( <div class="header"> <Logo></Logo> </div> );
13.
13 Компоненты дизайна
14.
14 Глобальный CSS :-( *
{ box-sizing: border-box; } .title { font-size: 30px; }
15.
15 Глава 2 Четыре
всадника CSS
16.
16 Всадник 1 Конфликт
селекторов /* logo.css */ .name { color: gray; } /* header.css */ .name { color: red; }
17.
17 БЭМ window.prefixA = …; window.prefixB
= …;
18.
18 Всадник 2 Глобальный
сброс * { box-sizing: border-box; }
19.
19 Всадник 3 Наследуемые
свойства body .header .logo line-height: 1.4 line-height: 1.4 line-height: 1.4
20.
20 Агрессивные селекторы .article p
{ margin-bottom: 1em; }
21.
21 Всадник 4 Медиа-выражения
страницы .logo:container( width <= 100px ) { .name { display: none; } }
22.
22 Четыре встадника Конфликт селекторов Глобальный
сброс Наследуемые свойства Медиа-выражения страницы
23.
23 Ждать Веб-компонентов?Ждать Веб-компонентов?
24.
24 Глава 3Глава 3Глава
3 Глава 3 Революция
25.
25 PostCSS
26.
26 Задачи Sass PostCSS
27.
27 Код return gulp.src('src/*.scss') .pipe( sass()
) .pipe( postcss(plugins) ) .pipe( gulp.desc('build/') );
28.
28 Глава 4 Побеждаем
глобальный CSS
29.
29 Шаг 1 Чистая
комната gulp.task('css:new', () => { return gulp.src('src/new/') .pipe( postcss([ require('autoprefixer') // other plugins ]) ) .pipe( gulp.dist('build/') ) });
30.
30 Шаг 2 Нарежьте
дизайн на блоки
31.
31 Шаг 3 Папка
для компонента logo/ logo.js logo.css company.svg header/ header.js header.css js/ logo.js header.js css/ logo.css header.css images/ company.svg
32.
32 Шаг 4 postcss-modules postcss([ require('autoprefixer'), require('postcss-modules') ])
33.
33 Пишите любые селекторы .name
{ color: red; } .Logo_name_jbds3 { color: red; }
34.
34 Шаблон var style =
require('./logo.css.json'); export const Logo = () => ( <div className={ style.name }> </div> );
35.
35 Работает с PHP
и Rails - style = load_json('logo.css.json'); %div{ class: style.name }
36.
36 CSS Modules против
БЭМ 1. Стили чище 2. Переносимость между проектами 3. Безопаснее для виджетов
37.
37 Первая победа Конфликт селекторов Глобальный
сброс Наследуемые свойства Медиа-выражения страницы
38.
38 Локальный сброс h1, h2,
…, div { /* сброс */ } .header { /* стили */ } .logo { /* стили */ } .header, .logo { /* сброс */ } .header { /* стили */ } .logo { /* стили */ }
39.
39 Локальный сброс body .header .logo line-height:
1.4 line-height: 1 line-height: 1
40.
40 Плюсы локального сброса 1.
У каждого — свой ресет 2. Переносимость между проектами 3. Защищает от наследуемых свойств
41.
41 Сброс по W3C .logo
{ all: initial; }
42.
42 Шаг 5 postcss-autoreset postcss([ …, require('postcss-autoreset')({ reset:
{ all: 'initial', boxSizing: 'border-box' } }) ])
43.
43 Шаг 6 postcss-cssnext postcss([ require('autoprefixer'), require('postcss-modules'), require('postcss-autoreset'), require('postcss-cssnext') ])
44.
44 Полифил будущего CSS .logo
{ all: initial; } .logo { display: block; border: none; padding: 0; margin: 0; … }
45.
45 Ещё две победы Конфликт
селекторов Глобальный сброс Наследуемые свойства Медиа-выражения страницы
46.
46 Шаг 7 cq-prolyfill <script
src="cq-prolyfill.min.js" async> </script> postcss([ …, require('cq-prolyfill/postcss-plugin') ])
47.
47 Медиа-выражения контейнера .logo:container( width
>= 100px ) { … } .logo:container( text-align = right ) { … } .logo:container( background-color lightness > 20% ) { … }
48.
48 Полная изоляция Конфликт селекторов Глобальный
сброс Наследуемые свойства Медиа-выражения страницы
49.
49 Глава 5Глава 5Глава
5 Глава 5 ПлюсыПлюсыПлюсы Плюсы
50.
50 Без вопросов 1. Виджеты
на сторонние сайты 2. Компоненты в npm 3. Плагины для браузера 4. Большие команды с кучей проектов
51.
51 Без вопросов 1. Виджеты
на сторонние сайты 2. Компоненты в npm 3. Плагины для браузера 4. Большие команды с кучей проектов
52.
52 Проще тестировать
53.
53 Проще обновлять технологии old/ logo/ new/ header/
54.
54 Глава 6Глава 6Глава
6 Глава 6 СоветыСоветыСоветы Советы
55.
55 Главное зло .logo { &.is-in-header
{ width: 100px; height: 100px; padding: 10px 0; } &.is-in-footer { … } }
56.
56 Совет 1 Пишите
размеры в обёртках <div className={ style.place }> <Logo> </div> .place { width: 100px; height: 100px; padding: 10px 0; position: relative; } .logo { width: 100%; height: 100%; }
57.
57 Совет 2 Вкладывайте
друг в друга <Button icon="remove" /> <Button> <RemoveIcon> </Button>
58.
58 Финал
59.
59 Полная изоляция postcss([ require('autoprefixer'), // Изоляция
селекторов require('postcss-modules'), // Локальный сброс require('postcss-autoreset'), require('postcss-cssnext'), // Контейнерные выражения require('cq-prolyfill/postcss-plugin') ])
Download now