![Конфигурация Webpack
{
module: {
loaders: [
{ test: /.css$/, loader: 'style!css' }
]
}
}
32](https://image.slidesharecdn.com/cssmanagementin2016-160430060228/85/CSS-2016-32-320.jpg)
![Конфигурация Webpack
{
test: /.css$/,
loader: 'style!css-loader?modules&importLoaders=1&' +
'localIdentName=[name]__[local]___[hash:base64:5]'
}
35](https://image.slidesharecdn.com/cssmanagementin2016-160430060228/85/CSS-2016-35-320.jpg)
CSS-менеджмент в 2016
- 1. CSS-менеджмент в 2016 Тимофей Чаптыков [email protected] @chaptykov
- 3. skver.2gis.ru пока для Москвы и Новосибирска 3
- 4. Проблема1 4
- 9. С какой экосистемой мы имеем дело? 9
- 12. Стили Неотъемлемая и неотделимая часть приложения. • Стили должны подчиняться правилам экосистемы JavaScript • JavaScript-приложение должно учитывать специфику работы со стиялми 12
- 14. Архитектура1 14
- 16. Архитектура • Выделение абстракций • Установка интерфейсов взаимодействия между абстракциями 16
- 19. BEM by Yandex <div class="block block--mod"> <p class="block__elem">Lorem ipsum</p> </div> 19
- 20. OOCSS by Yahoo <div class="block w200"> Lorem ipsum </div> 20
- 21. SMACSS by Johnathan Snook <header class="l-header"> <div class="block"> <div class="block-elem is-modified"></div> </div> </header> 21
- 22. BEMIT by CSS Wizardy <div class="o-obj@md c-block c-block--mod"> <p class="o-obj__elem@md c-block__elem"> Lorem ipsum </p> </div> 22
- 23. Atomic CSS by Yahoo <div class="foo Bd C(#0280ae) Ta(c)"> <p class="Op(0) foo:h>Op(1)">Lorem ipsum</p> </div> 23
- 25. Бритва Оккама
- 28. Webpack 28
- 29. CSS как js-модуль import './block.css'; import React from 'react'; export const Block = () => { return <div className="foo" />; }; 29
- 32. Конфигурация Webpack { module: { loaders: [ { test: /.css$/, loader: 'style!css' } ] } } 32
- 33. Результат <style> .foo { /* rules are here */ } </style> … <div class="foo"></div> 33
- 34. CSS-модули import s from './block.css'; import React from 'react'; export const Block = () => { return <div className={s.foo} />; }; 34
- 35. Конфигурация Webpack { test: /.css$/, loader: 'style!css-loader?modules&importLoaders=1&' + 'localIdentName=[name]__[local]___[hash:base64:5]' } 35
- 36. Результат <style> .block__foo___bg5ax { /* rules are here */ } </style> … <div class="block__foo___bg5ax"></div> 36
- 38. Названия ключей :root { --red: blue; /* ? */ } a { color: var(--red); } 38
- 39. Уместное переиспользование :root { --linkHoverColor: blue; } header { background: var(—linkHoverColor); /* ? */ } 39
- 40. А нужно ли вообще выносить в конфиг? 40
- 42. Инструментирование Возможность отслеживания или установления количественных параметров уровня производительности программного продукта, а также возможность диагностировать ошибки и записывать информацию для отслеживания причин их возникновения. 42
- 43. Инструментирование Возможность отслеживания или установления количественных параметров уровня производительности программного продукта, а также возможность диагностировать ошибки и записывать информацию для отслеживания причин их возникновения. 43
- 44. Инструментирование • Низкий уровень — код, конструкции языка • Высокий уровень — абстракции приложения Условная терминология 44
- 45. Инструментирование → Низкий уровень 45
- 50. Синтаксические ошибки в JS var a = }; Parsing error: Unexpected token } 50
- 51. Синтаксические ошибки в CSS div {}} CssSyntaxError: Unexpected } 51
- 52. Проверка стиля кода в JS function() { var foo = 1; var bar = 2; } Expected indentation of 4 spaces 52
- 53. Проверка стиля кода в CSS div { display: block; color: red; } Expected indentation of 4 spaces 53
- 54. Другие вопросы • Сколько селекторов в ваших стилях? • Какая максимальная специфичность? • Сколько видов цветов используется в ваших стилях? 54
- 55. Инструментирование → Высокий уровень 55
- 57. CSSO — минимизируем CSS Доклад Романа Дворнова на WSD 57
- 58. Дополнительная информация об использовании CSS может сильно улучшить сжатие стилей 58
- 59. CSS Modules 59
- 60. Инструментирование CSS • Встроенные стили или отдельный бандл? • Разделение на чанки? • Асинхронная загрузка стилей? • Кеширование в localStorage? • Critical CSS? 60
- 61. Здесь будут самые вкусные новинки 2016 61
- 62. Cпецифичное инструментирование для вашего проекта 62
- 65. Как быстро вы понимаете, что происходит? 65
- 66. Микроменеджмент → Порядок правил 66
- 69. Микроменеджмент → Порядок селекторов 69
- 70. Порядок блоков в CSS • Константы сверху • Селекторы по порядку их использования в DOM • Анимации и медиавыражения вниз 70
- 71. :root { --color: red; } .foo { color: var(--color); animation: fade 1s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 0; } } 71
- 73. Оптимизация для себя, а не для браузеров 73
- 75. .foo { line-height: 2; font-size: 14px; top: 50%; margin-left: -20px; width: 40px; margin-top: -20px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; left: 50%; height: 40px; text-align: center; position: absolute; } 75
- 76. .foo { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; font-size: 14px; line-height: 2; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; } 76
- 77. Используем сокращенную запись .foo { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; width: 40px; height: 40px; font: bold 14px/2 Helvetica, Arial, sans-serif; text-align: center; } 77
- 78. postcss-short .foo { position: absolute 50% * * 50%; margin: -20px 0 0 -20px; size: 40px; font: bold 14px/2 Helvetica, Arial, sans-serif; text-align: center; } 78
- 79. Пишем коротко 79
- 80. До .foo { background-image: linear-gradient( to bottom, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100% ); } 80
- 81. После .foo { background: linear-gradient(#000 50%, #fff 50%); } 81
- 82. Микроменеджмент → Свой язык 82
- 83. Свой язык в JavaScript function Foo() { // … } Функция-конструктор 83
- 84. Какую информацию несет стиль кода CSS? 84
- 85. .foo { display: block; } /** * - Переопределяем поведение строкового элемента? * - Переопределяем вышестоящее правило? * - Просто лишнее правило? На всякий случай? */ 85
- 86. Соглашения • Не пишем значения по умолчанию • Использование каждого правила должно быть обосновано 86
- 87. .foo { margin-top: 20px; } /** * - Какие значения для остальных отступов? * - Переопределяем браузерные свойства (h1, ul)? */ 87
- 88. Соглашения • По умолчанию полная запись правила • Отдельная запись для переопределния или сохранения определенных выше правил 88
- 89. Итог5 89
- 90. Выводы • Прислушиваемся к экосистеме • Используем компонентный подход • Оставляем возможности для инструментирования • Пишем для завтрашнего себя 90