Андрей Ситник
1 like•917 views
Документ обсуждает применение технологий CSS для решения проблем, связанных с изоляцией стилей, конфликтами селекторов и наследуемыми свойствами. Включены рекомендации по использованию PostCSS и CSS-модулей для создания более структурированных и переносимых компонентов. Также рассматриваются советы по написанию стилей, оптимизации их использования и обеспечения локальной изоляции.
![29
Шаг 1 Чистая комната
gulp.task('css:new', () => {
return gulp.src('src/new/')
.pipe( postcss([
require('autoprefixer')
// other plugins
]) )
.pipe( gulp.dist('build/') )
});](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-29-320.jpg)
![32
Шаг 4 postcss-modules
postcss([
require('autoprefixer'),
require('postcss-modules')
])](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-32-320.jpg)
![42
Шаг 5 postcss-autoreset
postcss([
…,
require('postcss-autoreset')({
reset: {
all: 'initial',
boxSizing: 'border-box'
}
})
])](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-42-320.jpg)
![43
Шаг 6 postcss-cssnext
postcss([
require('autoprefixer'),
require('postcss-modules'),
require('postcss-autoreset'),
require('postcss-cssnext')
])](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-43-320.jpg)
![46
Шаг 7 cq-prolyfill
<script src="cq-prolyfill.min.js" async>
</script>
postcss([
…,
require('cq-prolyfill/postcss-plugin')
])](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-46-320.jpg)
![59
Полная изоляция
postcss([
require('autoprefixer'),
// Изоляция селекторов
require('postcss-modules'),
// Локальный сброс
require('postcss-autoreset'),
require('postcss-cssnext'),
// Контейнерные выражения
require('cq-prolyfill/postcss-plugin')
])](https://image.slidesharecdn.com/css-isolation-ru-160328131258/85/-59-320.jpg)
Андрей Ситник
- 1. 1 Изоляция CSS Андрей Ситник, Злые Марсиане
- 2. 2 Злые марсианеЗлые марсианеЗлые марсиане Злые марсиане
- 5. 5 Глава 1Глава 1Глава 1 Глава 1 ПроблемаПроблемаПроблема Проблема
- 6. 6 Зачем нам ИТ?Зачем нам ИТ?Зачем нам ИТ? Зачем нам ИТ?
- 7. 7 Рост сложности 3 объекта 6 объектов 3 связи 15 связей
- 9. 9 Программирование —Программирование — контроль сложностиконтроль сложности
- 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> );
- 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; }
- 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 Четыре встадника Конфликт селекторов Глобальный сброс Наследуемые свойства Медиа-выражения страницы
- 24. 24 Глава 3Глава 3Глава 3 Глава 3 Революция
- 25. 25 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
- 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' } }) ])
- 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. Большие команды с кучей проектов
- 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') ])