Чистая и масштабируемая архитектура CSS

Есть много продвинутых курсов по CSS, по flexbox, CSS-анимации, CSS-grid… Однако в этом курсе мы сосредоточимся на архитектуре CSS. Если вы заинтересованы в том, чтобы научиться писать чистый и масштабируемый код CSS, этот курс - то, что вам нужно! CSS прост, его легко выучить, его легко написать. Но на самом деле сложно написать масштабируемый и удобный в сопровождении код, особенно в больших проектах, требующих постоянного масштабирования… Это курс, который я хотел бы иметь, когда начал работать над более сложными проектами.

Есть много причин, почему это так:

• В CSS все находится в глобальной области видимости. Любое изменение в одном файле может привести к (не)ожидаемому результату в другом элементе или на странице.
• CSS - очень изменчивый язык из-за его каскадной природы. Каждое изменение приводит к путанице и неожиданным результатам.
• CSS сильно зависит от исходного порядка.
• С другой стороны, специфичность может отменить все. Неважно, как вы структурируете свой код, специфичность может все сломать. Специфика - одна из самых больших проблем CSS.
• CSS не (легко) масштабируется

Мы заканчиваем цикл написания большего количества CSS только для того, чтобы исправить старый CSS! В какой-то момент весь наш код CSS становится слишком беспорядочным и слишком большим. Нам нужен лучший подход, нам нужен модульный и предсказуемый CSS. Язык CSS не развивался с 1998 года. Препроцессоры есть, но они не решают основных проблем CSS. В конце концов, SASS и Less компилируются в CSS.

В этом курсе мы поговорим об архитектуре CSS и о том, как писать чистый и удобный для сопровождения код. Наша цель - написать CSS, который должен быть:

• Предсказуемый: правила CSS ведут себя так, как мы ожидаем.
• Повторно используемый: при добавлении новых компонентов нам не нужно перекодировать шаблоны или проблемы, которые мы уже решили.
• Сопровождаемый: новые функции, компоненты или обновления не должны требовать рефакторинга нашего CSS и НЕ должны нарушать существующие компоненты.

Идея состоит в том, чтобы взять философию объектно-ориентированного программирования, которую вы уже изучили в Java, PHP, C#, и найти способ перевести ее в CSS. Все, что вы узнали из языков ООП, все принципы DRY, SOLID, SRP, неизменяемость, мы можем каким-то образом применить к CSS. Простота лучше всего.