iWatchYouFromAfar
меня модкс тем и радует, что тут разворачиваешься в разы быстрее, посему я себе утилиты и сделал, сделал окружение которое позволяет мне быстро развернуть сайт
Pavel
Пока сформированных стайлгайдов нет. Озвучу наши собственные требования, по которым разрабатывалась https://sneakers.shopaholic.dev.
- модульный код (HTML/Twig, CSS, JS) разложены по папочкам в partials
- JS используется стандартный для тех моментов, которые уже реализованы https://www.npmjs.com/search?q=shopaholic
- CSS написан по принципу mobile-first
- CSS написан по методологии БЭМ
- CSS в идеале ванильный, приправленный PostCSS, на крайняк SCSS
- семантический HTML, расширенный разметкой schema.org там, где это уместно и aria-атрибутами, там, где рекомендуется
- UI темы приближен насколько возможно к требованиям WCAG 2.1 Level AA (хорошая семантика и aria для этого в т.ч. нужны)
- все метрики Lighthouse не менее 90
- метрики PageSpeed не менее 90
- интерфейсные картинки оптимизированы, где принято использовать SVG, он используется
- контентные картинки подключаются по адаптивной технологии (picture, srcset, size и WebP с фолбэком на JPG)
- наличие сборки в поставке темы (Gulp, а лучше Webpack или Rollup), наличие линтинга CSS и JS при сборке.
Тема Sneakers максимально приближена к этим требованиям. В будущем мы планируем собирать все темы на фреймворке Undercoat, который неспешно (надеемся ускорится) пилим. https://github.com/undercoat/undercoat/
Следующим сообщением опишу принципы фреймворка (большинство описано в Readme, но не все).
Pavel
Принципы 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-разметка. Все больше стран законодательно обязывают владельцев веб-сайтов обеспечивать их доступность.
Также при разработке учтены такие особенности под скринридеры, как продемы списков с 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.
Ну вот как-то так.
Anonymous
Я почитал, в большей степени это про фронт, бэков косвенно касается. Так что некоторые вещи пометил себе, чтобы фронтов пинать 😀