PL
Принципы Undercoat.
1. БЭМ
На текущей стадии развития CSS это единственная вменяемая методология с разныеми ее вариациями. По множеству опросов, в т.ч. Global state of CSS 2019, 90% разработчиков используют или знают БЭМ.
2. Нет темы по умолчанию
Большинство претензий к CSS-фреймворкам заключается в том, что при их использовании непременно приходится "бороться" с дефолтными стилями и "перебивать" их, т.к. никогда не хватает набора настраиваемых переменных, которые идут "из коробки". Тема затрагивается в т.ч. вот здесь https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid/
Поэтому CSS компонентов минимален. Содержит только те стили, которые точно не придется "перебивать" (например, https://github.com/undercoat/undercoat/blob/master/packages/breadcrumb/breadcrumb.css) , а остальное по БЭМу дописывается на проектном уровне переопределения. Затем сборщик склеивает эти наборы стилей и получается общий CSS для компонента.
Тем не менее, дефолтную тему можно будет подключить (см. далее про Токены).
3. Mobile friendly
Мобильный трафик уже года 4 назад превысил десктопный во всем мире. И чем дальше тем соотношение desktop/mobile все больше в пользу второго. Google индексирует мобильную (adaptive/responsive) версию сайта, если детектит ее. Пока это не учитывается при ранжировании, но... не ровен час. Поэтому mobile-first, adaptive images и все такое.
4. SEO friendly
Хорошая семантика HTML, расширенная с помощью microdata от schema.org. Это и индексация хорошая при прочих равных и красивые виджеты в поисковой выдаче.
5. Accesibility (a11y)
На Западе, да и все чаще у нас, выставляются требования обеспечения доступности сайтов для людей с ограниченным возможностями (это не только проблемы со зрением). Во фреймворке хорошая HTML-семантика дополняется, где рекомендовано aria/role-атрибутами, что обеспечивает хорошую доступность для скринридеров. Но a11y, это еще и про хорошую доступность с клавиатуры, в т.ч. а это семантика и правильная HTML-разметка. Все больше стран законодательно обязывают владельцев веб-сайтов обеспечивать их доступность.
Также при разработке учтены такие особенности под скринридеры, как продемы списков с
6. Интернационализация
В мире письменность не ограничивается форматом слева-направо и сверху вниз (большинство языков). Иврит и арабские языки, например, пишутся справа-налево. А корейский вертикально! С помощью CSS Logical properties можно писать такой CSS, который будет автоматом перестраивать инфтерфейс, под необходимую направленность письма. Посмотрите, например, на интерфейс Wikipedia для того же иврита. Нужно просто перестроить мышление для использования этих свойств. Почитайте https://www.smashingmagazine.com/2019/08/writing-modes-layout/ и https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/
Т.о. образом просто начав писать CSS по-другому без дополнительных трудозатрат, фреймворк "из коробки" дает "выход" на арабский и азиатский рынки. И все это прекрасно фолбэчится с помощью PostCSS, если необходимо, если что.
7. Дизайн-токены
Я говорил, что тема по-умолчанию отсутствует. Но она может быть подключена, как зависимость отдельным NPM-пакетом. Пакет будет содержать ровно один файл с токенами (по сути переменными, содержащими описание дизайна). Во все компоненты фреймворка будет добавлен типовой набор CSS Custom properties с пустыми значениями. И, если в компонент, "спустятся" по каскаду значения из токенов, то все компоненты сразу же станут "задизайнены".
Такой подход очень интересен еще и потому, что можно будет легко экстендить чужие темы. Представьте, вам нужно сделать какой-то уникальный попап для темы, которую вы купили. А тема создана по описанным, выше принципам. Так вот, вы заверстываете этот попап по гайдам фреймворка, т.е. компоненты в разметке имеют стандартные классы, в классы в стилях содеожат стандартные токены для типовых свойств (цвета, отступы, размер и т.п.). И вот вы подключаете такой компонент в тему и вуаля, он стал выглядеть, как эта тема. Этот подход похож на Props в React.
Ну вот как-то так.
1. БЭМ
На текущей стадии развития CSS это единственная вменяемая методология с разныеми ее вариациями. По множеству опросов, в т.ч. Global state of CSS 2019, 90% разработчиков используют или знают БЭМ.
2. Нет темы по умолчанию
Большинство претензий к CSS-фреймворкам заключается в том, что при их использовании непременно приходится "бороться" с дефолтными стилями и "перебивать" их, т.к. никогда не хватает набора настраиваемых переменных, которые идут "из коробки". Тема затрагивается в т.ч. вот здесь https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid/
Поэтому CSS компонентов минимален. Содержит только те стили, которые точно не придется "перебивать" (например, https://github.com/undercoat/undercoat/blob/master/packages/breadcrumb/breadcrumb.css) , а остальное по БЭМу дописывается на проектном уровне переопределения. Затем сборщик склеивает эти наборы стилей и получается общий CSS для компонента.
Тем не менее, дефолтную тему можно будет подключить (см. далее про Токены).
3. Mobile friendly
Мобильный трафик уже года 4 назад превысил десктопный во всем мире. И чем дальше тем соотношение desktop/mobile все больше в пользу второго. Google индексирует мобильную (adaptive/responsive) версию сайта, если детектит ее. Пока это не учитывается при ранжировании, но... не ровен час. Поэтому mobile-first, adaptive images и все такое.
4. SEO friendly
Хорошая семантика HTML, расширенная с помощью microdata от schema.org. Это и индексация хорошая при прочих равных и красивые виджеты в поисковой выдаче.
5. Accesibility (a11y)
На Западе, да и все чаще у нас, выставляются требования обеспечения доступности сайтов для людей с ограниченным возможностями (это не только проблемы со зрением). Во фреймворке хорошая HTML-семантика дополняется, где рекомендовано aria/role-атрибутами, что обеспечивает хорошую доступность для скринридеров. Но a11y, это еще и про хорошую доступность с клавиатуры, в т.ч. а это семантика и правильная HTML-разметка. Все больше стран законодательно обязывают владельцев веб-сайтов обеспечивать их доступность.
Также при разработке учтены такие особенности под скринридеры, как продемы списков с
list-style: none в Safari.6. Интернационализация
В мире письменность не ограничивается форматом слева-направо и сверху вниз (большинство языков). Иврит и арабские языки, например, пишутся справа-налево. А корейский вертикально! С помощью CSS Logical properties можно писать такой CSS, который будет автоматом перестраивать инфтерфейс, под необходимую направленность письма. Посмотрите, например, на интерфейс Wikipedia для того же иврита. Нужно просто перестроить мышление для использования этих свойств. Почитайте https://www.smashingmagazine.com/2019/08/writing-modes-layout/ и https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/
Т.о. образом просто начав писать CSS по-другому без дополнительных трудозатрат, фреймворк "из коробки" дает "выход" на арабский и азиатский рынки. И все это прекрасно фолбэчится с помощью PostCSS, если необходимо, если что.
7. Дизайн-токены
Я говорил, что тема по-умолчанию отсутствует. Но она может быть подключена, как зависимость отдельным NPM-пакетом. Пакет будет содержать ровно один файл с токенами (по сути переменными, содержащими описание дизайна). Во все компоненты фреймворка будет добавлен типовой набор CSS Custom properties с пустыми значениями. И, если в компонент, "спустятся" по каскаду значения из токенов, то все компоненты сразу же станут "задизайнены".
Такой подход очень интересен еще и потому, что можно будет легко экстендить чужие темы. Представьте, вам нужно сделать какой-то уникальный попап для темы, которую вы купили. А тема создана по описанным, выше принципам. Так вот, вы заверстываете этот попап по гайдам фреймворка, т.е. компоненты в разметке имеют стандартные классы, в классы в стилях содеожат стандартные токены для типовых свойств (цвета, отступы, размер и т.п.). И вот вы подключаете такой компонент в тему и вуаля, он стал выглядеть, как эта тема. Этот подход похож на Props в React.
Ну вот как-то так.
