Методология Cube CSS и другие основы

Не буду много расписывать о "Кубе", потому что вы можете сами прочитать о нем здесь и здесь, а скажу в двух словах: никаких rem'ов, никаких GRID, никаких калькуляций в значениях CSS-свойств, меньше CSS-переменных и ни в коем случае никаких больших вложенностей в HTML.

Причем, некоторые правила компании невелирует сами понятия Cube CSS, отчего сложится впечатление, что это гибридный формат интерпритации самой методологии. Основные правила, которых стоит придерживаться, изложены в предыдущем абзаце. Наглядный пример можно посмотреть в одном из проектов:

С чем придется смириться:

• Методология БЭМ может являться признаком множества споров
• Методология mobile-first (по мнению владельца бизнеса) является ошибкой. Просто смиритесь и пишите код от большего к меньшему (desktop-first), даже если проект имеет дизайн-структуру mobile-first.
• Использование единиц измерения REM - является фатальной ошибкой и плохо тестируется (по мнению компании)
• Использование вычислений (калькуляции) в CSS - является ошибкой (по мнению компании), которую необходимо избегать
• Использование GRID контейнеров в CSS - является ошибкой и плохо тестируется (по мнению владельца бизнеса), которую необходимо избегать
• Использование большого количества вложенности в HTML - является фатальной ошибкой: старайтесь избегать, а в некоторых случаях включать смекалку и использовать минимальное количество вложенности в HTML
• Использование CSS-переменных типа var(--color) возможно, но только для служебных стилей. Например, использовать для белого цвета (#ffffff) переменную нельзя, потому что это является фатальной ошибкой (по мнению владельца бизнеса)
• Написание такого класса для шапки сайта, как: < header class="header" > < / header > - лучше так не делать, но все же возможно
• Узкая система брейкпоинтов: 360 ➡️ 720 ➡️ 1000 ➡️ 1500. На самом деле, можно сделать так: 0 ➡️ 576 ➡️ 720 ➡️ 992 ➡️ 1024 ➡️ 1200 ➡️ 1360 ➡️ 1440 ➡️ 1500 (не для всех случаев), чаще будете использовать: 0 ➡️ 720 ➡️ 992 ➡️ 1200 ➡️ 1500
• Нет возможности создавать отдельные повторяющиейся элементы, например бургер-меню, не должно быть отдельным элементом. Если навигация есть в шапке, то при схлопывании на брейкпоинте она же становится схлопнутым бургер-меню
• Во FLEXBOX-контейнерах обращение к дочерним элементам лучше писать так: .flex > * {};
• Придется дорабатывать или иногда додумывать дизайн-структуру в макете Figma, собирать свой icon-pack для работы (советую использовать сервис Glyther)