Современные тренды web-дизайна веб-приложений на середину 2021

Источники информации

Способы организации CSS кода
I. https://habrahabr.ru/post/256109/

Учимся любить БЭМ
II. http://frontender.info/learning-to-love-bem/

Опрос разработчиков на 16 марта 2016

III. Результаты масштабного опросника по CSS (The Results of The Ultimate CSS Survey)
http://www.sitepoint.com/results-ultimate-css-survey/

Методологии вёрстки
IV, http://html5.by/blog/bem-amcss-oocss-atomiccss-opor-mcss-smacss-fun-docssa-video/

Статья Как выбрать фреймворк для frontend-разработки

V.  https://habrahabr.ru/post/277547/

Оригинал

https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.1gmuglfia

Статья
VI. https://www.keycdn.com/blog/front-end-frameworks/

Каталог отечественных дизайн-систем
http://designsystemsclub.ru

PS
Ссылки на эти статьи даны в круглый скобках
Зелёным цветом указан лучший вариант

1. Общая информация по CSS

Почему CSS4 не существует — объяснение уровней CSS (Why there is no CSS4 — explaining CSS Levels)
https://www.rachelandrew.co.uk/archives/2016/09/13/why-there-is-no-css4-explaining-css-levels/

Первый черновик CSS 5 уровняhttps://css-live.ru/vecssti-s-polej/pervyj-chernovik-css-5-urovnya.html

https://www.w3schools.com/css/default.asp - учебник

http://cssreference.io/
Документация по свойствам CSS для дизайнеров и других специалистов

2. Типографика

Иконки
SVG
От использования иконочных шрифтов в пользу SVG-иконок отказался GitHub
https://twitter.com/webstandards_ru/status/702065716317573120

-----
Вариативные шрифты
представители
https://webkit.org/blog/7051/variable-fonts-on-the-web/
Adobe, Microsoft, Apple и Google реализовали поддержку вариативных шрифтов с помощью OpenType.

Знакомьтесь, вариативные шрифты (variable fonts)!https://type.today/ru/journal/opentype_variables

Introducing OpenType Variable Fonts
https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

The variable state of the browsers, early 2017https://www.axis-praxis.org/blog/2017-04-18/18/the-variable-state-of-the-browsers-early-2017

Variable Fonts on the Webhttps://webkit.org/blog/7051/variable-fonts-on-the-web/

Цветные шрифты
http://www.colorfonts.wtf/

3. Архитектура CSS-фреймворков

В основном тут два подхода (см. I)
Популярный объектно-ориентированный OOCSS и более поздний компоненто-ориентированный подход БЭМ (BEM)

• БЭМ (блок-элемент--модификатор)
• Автор: Яндекс - https://ru.bem.info
• Термины
• Блок (компонента)
• Элемент - часть блока
• Модификатор - внешний вид 
• Оформление
• Стиль без подчёркивания
• blockName-elementName--modificator
• Стиль с подчёркиванием
• blockName_elementName__modificator
• Пример со стилем без подчёркивания
• .fileUploader {}
• .fileUploader-container {}
• .fileUploader-container--disable {}
• .fileUploader-buttonUpload {}
•  Плюсы (см. I и II)
• Логика именования позволяет сразу понять что именно обозначает конкретный CSS-класс
• Каждый элемент находится в пространстве имён, что делает поиск и замену в рамках проекта более надёжным
• Уменьшается вероятность конфликта между классами
• Повышается производительность. Так как CSS-селекторы читаются справа налево, а БЭМ основан на использовании одного класса
• Уменьшается количество проблем с весом селекторов, так как обычно используется только имя класса, без учёта вложенности.
• Компоненты легко переносятся из проекта в проект. На практике это означает улучшение качества кода и повышение скорости разработки.
•  Минусы
• Не всегда длинные названия классов удобны для использования
• Разметка может содержать массу классов, которые, на самом деле, делают совсем немного
• Фреймворки, например, Bootstrap, не содержат БЭМ, так что попытка комбинировать их с БЭМ может привести к неоднородности в пространстве имён и возникновению путаницы
•  Общий вывод
• Для больших проектов БЭМ — отличный выбор. Он потребует некоторых усилий в начале работы, но сэкономит массу времени в долгосрочной перспективе.
• OOCSS (Object Oriented CSS)
• Автор: Nicole Sullivan - http://www.stubbornella.org/content/nicole-sullivan/
• Основной принцип состоит в выделении классов по функциональному назначению и реиспользовании их при описании компонент
• Пример со стилем без подчёркивани
• .container {}
• .fileUploader {}
• .fileUploader .container {}
• .fileUploader .container div{}
• .disable {}
• .buttonUpload {}
•  Плюсы
• уменьшение количества кода за счет повторного его использования
•  Минусы
•  достаточно сложная поддержка: при изменении стиля конкретного элемента скорее всего придется менять сразу в нескольких классах

Существуют попытки развить перечисленные выше подходы, но они были раскритикованы

BEMIT - Автор Гарри Робертс - http://habrahabr.ru/company/paysto/blog/264569/

добавляет в BEM префиксы (c - компонента, u - утилита) и суффиксы (@suffix)

пример u-hidden@print

AtomicCSS - Автор Тьерри Коблентц (Yahoo) -
Оригинальная статьяhttp://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/

Тот же OOCSS возведенный в абсолют в сторону максимального реиспользования стилей

4. Лучший CSS-Фреймворк

Самые рекомендуемый OOCSS фреймворк согласно (VI)
Bootstrap
https://github.com/twbs/bootstrap/stargazers

Самые рекомендуемые БЭМ фреймворки согласно (VI), основанные на принципах
Material Design Litehttps://getmdl.io/

Также есть интересный фреймворк Pure - чистый CSS фреймворк без jquery и javascript

5. MDL-фреймворки

Materialize: 21,515 Stars (VI)
Pros:

• Huge selection of components
• Responsive support ensures that websites are supported across all devices

Cons:

• Large file size makes this a bulky framework to work with
• No support for Flexbox model

Ideal for: Less experienced developers who need guidance regarding Google’s material design specifications

Material UI: 19,631 Stars (VI)
Pros:

• Easiest way to meet Google’s material design guidelines when using a framework 
• Highly customizable 

Cons:

• Not intended to serve as a starting point for from-scratch web design projects 
• Need a decent understanding of React to use effectively 

Ideal for: Developers who understand and have experience with React and who need an easy way to adhere to material design guidelines.

-------------------------
Дополнительно
A Practical Introduction to Material Design Lite by Google
Практическое введение в Material Design Lite от Googlehttp://www.sitepoint.com/practical-introduction-material-design-lite-google/

The Beginner’s Guide to Google’s Material Design
Введение в Material Design для новичковhttps://speckyboy.com/beginners-guide-material-design/

Material Design Awards 2016https://design.google/library/material-design-awards-2016/


Material Components — модульные и настраиваемые компоненты Material Design
https://material.io/components/

6. Для тех кто не готов к БЭМ и MDL: Bootstrap

Изменения в Bootstrap 4 по сравнению с Bootstrap 3

1 Убраны Icons

2 Убраны Badges и Lists (horizontal)

2 Добавлена Form Validation

3 Panels изменены  на cards

4 Collapse/Accordion реализуется через collapse вместо panel
5. Кнопки Outline

Для нормализации используется reboot.css вместо normalize.css

-------------------------

Дополнительные ссылки
Шпаргалка по Bootstrap 4 (Bootstrap 4 Cheat Sheet)
https://hackerthemes.com/bootstrap-cheatsheet/

Bootstrap 4: визуальное руководство и обзор нововведений (Bootstrap 4: A Visual Guide)
https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387

Bootsrap 4: что нового и что изменилось в Bootstrap 4, а также шпаргалка с именами классов
http://developer.telerik.com/featured/whats-new-whats-changed-bootstrap-4/
https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/

7. Preprocessors

1. Sass - 1425 (III)

2. Less - 762 (III)
3. Stylus - 100 (III)

-------------------------

less - уже устарел, например в Boostrap 4 отказываются от его поддержки

sass - это популярный препроцессор, написанный на ruby, который поддерживают все основные фреймворки

stylus - относительно новый препроцессор, написанный на javascript, для больших проектов его рано использовать, но в маленьких вполне обосновано.

8. Post-processing

Лучший минификатор
CSSO (V)
Лучшеее средство для добавления вендорных префиксов
PostCSS - 311 (III)
cssnext - cssnext is a PostCSS plugin, which makes it pretty easy to use for people who are already using PostCSS.
pleeease

autoprefixer/postcss (V)
https://github.com/postcss/postcss
-------------------------

Согласно (V) Autoprefixer, следовало бы использовать, т.к. в этом случае почти все миксины (для свойств с вендорными префиксами) будут не нужны.

Тем не менее PostCSS по прежнему выбор большинства
------------------------
Сравнение лучших CSS пре- и пост- процессоров (What are the best CSS preprocessors/postprocessors?)
https://www.slant.co/topics/217/~best-css-preprocessors-postprocessors

9. Способы организации CSS-кода

По данным статьи https://habrahabr.ru/post/256109/
дополнение из
http://frontender.info/learning-to-love-bem/

• SMACSS (Scalable and Modular Architecture for CSS) 
• Автор: Jonathan Snook - https://smacss.com/ 
• Структура 
• Base rules — стили основных элементов сайта (body, input) 
• Layout rules — cтили элементов, которые только раз на странице (футер) 
• Modules rules — cтили многоразово-используемых элементов 
• State rules — стили состояния модулей и скелета сайта 
• Theme rules — стили оформлений, которые, можно заменять 
• Рекомендации 
• рекомендуется вводить неймспейсы для классов одной группы 
• использовать отдельный неймспейс для классов, используемых в JavaScript 
• Примечание 
• Позволяет упростить написание и поддержку кода 
• В последнее время привлекает большое количество разработчиков
• FUN (Flat hierarchy of selectors, Utility styles, Name-spaced components) 
• Автор: Ben Frain
• https://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/
•  Структура
• F, плоская иерархия селекторов: в стилях рекомендуется использовать классы для выбора элементов, не вкладывать селекторы
• U, служебные классы: поощряется создание служебных атомарных стилей для решения типовых задач верстки, например, w100 для «width: 100%»
• N, компоненты с неймспейсами: такой подход позволит избежать совпадений в названиях классов.
•  Плюсы
•  код, написанный с использованием этих принципов достаточно удобно писать и поддерживать
• подход накладывает достаточно мало требований по структуре кода и проекта, он лишь устанавливает предпочтительную форму записи селекторов и способ их использования в разметке 

10. Правила форматирования и оформления стилей и html-кода

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.xml
На русском

https://habrahabr.ru/post/143452/

Небольшие дополнения взяты с
The CSS toolkit and guidelines that power GitHub.
http://primercss.io/guidelines/

Правила оформления HTML

     Используйте HTML так, как это было задумано.

     <!-- Не рекомендуется -->

    <div onclick="goToRecommendations();">All recommendations</div>

    <!-- Рекомендуется -->

    <a href="recommendations/">All recommendations</a>

     

    Всегда указывайте альтернативное содержимое для мультимедиа. Как минимум пустой альтернативный текст alt=""

     <!-- Не рекомендуется -->

    <img src="spreadsheet.png">

    <!-- Рекомендуется -->

    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">

    Не используйте ссылки-мнемоники.

    <!-- Не рекомендуется -->

    The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

    <!-- Рекомендуется -->

    The currency symbol for the Euro is “€”.

    Не указывайте атрибут type при подключении стилей и скриптов в документ.

    Для абзацев используйте <p> тэг. Не используйте <br> тэги.

    Для списков применяйте <ul>, <ol>, or <dl>. Не используйте множество <div> или <p>.

    Добавляйте <label> к элементам <input>

Правила форматирования HTML

    Use double ("") rather than single quotation marks ('') around attribute values.

Правила оформления CSS

    CSS VALIDATOR http://jigsaw.w3.org/css-validator/

    Вместо использования шифров, или описания внешнего вида элемента,

    попробуйте в имени класса или идентификатора выразить смысл его создания

    /* Не рекомендуется: не имеет смысла */

    #yee-1901 {}

    /* Не рекомендуется: описание внешнего вида */

    .button-red {}

     /* Рекомендуется: точно и по делу */

    .button-danger {}

    Избегайте непонятных сокращений

    /* Не рекомендуется */

    .atr {}

   

    /* Рекомендуется */

    .author {}

   

    Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента

    /* Не рекомендуется */

    ul#example {}

    div.error {}

    /* Рекомендуется */

    #example {}

    .error {}

    Не указывайте единицы измерения для нулевых значений

    Разделяйте слова в идентификаторах и именах классов с помощью дефиса.

    /* Не рекомендуется: does not separate the words “demo” and “image” */

    .demoimage {}

    /* Не рекомендуется: uses underscore instead of hyphen */

    .error_status {}

    /* Рекомендуется */

    #video-id {}

    .ads-sample {}

Правила форматирования CSS

Сортируйте правила по алфавиту.
Ставьте точку с запятой после каждого правила
Открывающую фигурную скобку обычно не переносят на другую линию

    Используйте одинарные ковычки ('') в атрибутах правил

    html {

      font-family: 'open sans', arial, sans-serif;

    }

Pixels vs. ems

    Use px for font-size, because it offers absolute control over text.

    Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

11. Проверка синтаксиса (linting)

Stylelint
https://github.com/brigade/scss-lint

Stylelint Config Generatorhttps://maximgatilin.github.io/stylelint-config/

Анализируйте ваш CSS с помощью stylelinthttps://css-tricks.com/stylelint/

Как линтить SCSS с помощью stylelint (How to lint SCSS
https://medium.com/@bjankord/how-to-lint-scss-with-stylelint-dc87809a9878

Интеграция Stylelint в ваш процесс разработки для улучшения CSS (Integrate Stylelint Into Your Workflow For Better CSS)
https://web-design-weekly.com/2016/06/15/integrate-stylelint-workflow-better-css/

Линтинг CSS с помощью stylelinthttps://habr.com/en/post/301594/

Stylelint: валидатор стилей, о котором мы всегда мечтали (Stylelint: The Style Sheet Linter We’ve Always Wanted)
https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/

Линстинг стилей в JavaScript с помощью stylelint

https://mxstbr.blog/2016/12/linting-styles-in-js-with-stylelint/

stylelint Homepage

https://stylelint.io/

Lint your CSS with stylelint

https://css-tricks.com/stylelint/

12. Документация для CSS

https://github.com/kneath/kss

13. flexbox

Система атрибутов для Flexbox разметки (Flex Layout Attribute)
http://progressivered.com/fla/?d=0&v=1&h=0&s=3&i=000&a=000

Почти полное руководство по flexbox (без самих flexbox). 
https://habr.com/en/post/281254/
Перевод статьи 
Almost complete guide to flexbox (without flexbox)https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox/

Flexbox Patterns — примеры использования Fexboxhttps://www.flexboxpatterns.com/
(Build awesome user interfaces with CSS flexbox. Examples and source code included.)

5 Flexbox методов, о которых вы должны знать
https://habr.com/en/post/302130/
перевод с

http://tutorialzine.com/2016/04/5-flexbox-techniques-you-need-to-know-about/

https://tutorialzine.com/2016/04/5-flexbox-techniques-you-need-to-know-about

Переводим всё на Flexbox (Going all-in on Flexbox)
https://isotoma.com/blog/2016/09/07/going-all-in-on-flexbox/

Разбираемся с CSS Flexbox за 5 простых шаговhttps://webdesignerwall.com/tutorials/master-css-flexbox-5-simple-steps

Понимание Flexbox: все что вам нужно затьhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

Слайды доклада «Do Better With Flexbox»http://damonbauer.me/

Flexbox — анимированное руководствоhttps://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

Что происходит при создании контейнера Flexbox?

https://habr.com/en/post/424419/

Наиболее распространенные варианты использования Flexbox

https://www.smashingmagazine.com/2018/10/flexbox-use-cases/

Создание гибких лейаутов с помощью Flexbox

https://www.sitepoint.com/creating-flexible-layouts-with-flexbox/

14. css-grid layout

CSS Grid Layout. Быстрый стартhttps://habr.com/en/post/325760/

Поэтапное руководство по алгоритму автоматического размещения из CSS Gridhttps://habr.com/en/company/nix/blog/326098/

Терминология CSS Grid Layout Terminology, объяснениеhttps://bitsofco.de/css-grid-terminology/
  

 cssgr.id — онлайн-генератор CSS Grid раскладки•
https://cssgr.id/
 

https://habr.com/company/oleg-bunin/blog/433320/ - Grid Layout как основа современной раскладки

15. Вёрстка писем

Гид по верстке адаптивных писемhttps://habrahabr.ru/company/netologyru/blog/324970/

16. Руководство по цветам

Цвет в системах дизайна (Color in Design Systems)
https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3

Простое руководство по выбору цветовой палитры (A Simple Web Developer’s Guide To Color)
https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Мощная онлайн-утилита ColorMe облегает подбор цветов для веба и позволяет конвертировать их, а также играть с параметрами цветовых моделей и мгновенно видеть результат.
https://colorme.io/

17. AMP

https://www.ampproject.org/

18. Дополнительные ссылки

Бесконечный просмотр против постраничной навигации (плюсы и минусы)

Infinite Scrolling vs. Paginationhttp://babich.biz/ux-infinite-scrolling-vs-pagination/

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов

https://css-live.ru/articles/ischerpyvayushhee-rukovodstvo-po-strategiyam-zagruzki-veb-shriftov.html

Houdini: один из самых впечатляющих проектов в CSS, о котором вы никогда не слышалиhttps://habr.com/en/company/mailru/blog/282027/

Как не облажаться с дизайном. Инструкция для чайников за 5 минутhttps://habr.com/en/company/iloveip/blog/328492/

19. Styled components

Styled Components
https://github.com/styled-components/styled-components

Скажите привет Houdini и CSS Paint APIhttps://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

Решено с помощью CSS! Dropdown Menushttps://css-tricks.com/solved-with-css-dropdown-menus/

Вариативные шрифтыhttp://css.yoksel.ru/opentype-variable-fonts/

CSS Grid Level 2: и пришел Subgrid
https://www.smashingmagazine.com/2018/07/css-grid-2/

API CSS Paint

https://habr.com/en/company/ruvds/blog/417075/

Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными

https://habr.com/en/company/skillbox/blog/418067/

CSS-in-JS — мифы и реальность (на примере styled-components)

https://habr.com/en/post/417707/

5 новых свойств CSS и как их использоватьhttps://www.creativebloq.com/how-to/5-hot-new-css-features-and-how-to-use-them

CSS в JS в реальной жизниhttps://medium.com/@warsawjs/css-in-js-in-real-life-e0b50bbbd740

Новые (и старые) единицы измерения в CSS, о которых вы вряд ли слышалиhttps://habr.com/en/company/poiskvps/blog/421709/

Первый (и странный) публичный черновик CSS-модуля скроллбаровhttps://css-live.ru/vecssti-s-polej/css-scrollbars-fpwd.html

Grid или Flexbox: что выбрать?
https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/


20. Изображения
Почему WebM лучше чем GIF для видео (сравнение)https://techstacker.com/why-webm-is-superior-to-gif-video-comparison/fr6xlr2zhn9usttsh/