Простые переменные формата элемент-свойство --block-title--padding определенные в контексте класса компонента, и константы формата --content-indent-big вместо произвольных значений решают 99% задач, сокращают код, стандартизируют и улучшают понимание.
Жесткие рамки рождают лучшие решения
CLVC родилась из практической задачи оптимизации процесса изменения шаблонов в конструкторе сайтов без доступа к редактированию HTML. В результате сотен проб и ошибок нам удалось выработать подход который облегчает работу по масштабированию в проекте любой сложности, а еще помогает строго следовать дизайн-системе проекта, интуитивно понятен и сокращает код.
создатель CLVC методологии
Методология родилась и в процессе решения банальной прикладной задачи, по систематизации корректировки css для проектов на фронт-энд конструкторе
Константы - определяют набор значений параметров оформления элементов. Константы определиться для всех состояний экранов.
Уровни являются префиксами и определяют размерность констант и область применения значений переменных
Переменные определяются для всех сущностей на каждом уровне вложенности интерфейса значениями констант, или абсолютными значениями (0, 100% и т.д.) Переменные не имеют определяться в разных состояниях экранов, это происходит на уровне констант.
Контекст определяет значение переменных в каждом конкретной области интерфейса если требуется их переопределить.
Для дизайна это простой и понятный способ определить границы возможных инвариантов компонентов дизайна.
По сути определив константы для CLVC мы получаем палитру не только цветов, а величин, визуальных эффектов, параметров анимации и любых других значений используемых параметров дизайна допустимых в рамках конкретной дизайн системы
Вёрстка
Для вёрстки применение clvc это способ в сократить объем работы и кода, существенно упростить создание новых компонентов.
Для вёрстки применение clvc это способ в сократить объем работы и кода, существенно упростить создание новых компонентов.
Пример 1
У нас есть баннер с заголовком, подзаголовком и фоном на всю ширину.
Новая версия компонента - баннер с тем же набором элементов но заголовок 64px (константа дизайна --const-textsize-big) , а сам блок на плашке со скруглёнными углами максимальной ширины 1200px (константа дизаqна --const-bl-width-middle).
и отступом от блоков сверху и снизу в 60px (константа дизаqна --const-bl-indent-middle)
Чтоб создать новый блок по методологии CLVC нам нужно задать контекст, а именно контейнеру присвоить класс нового блока .cover-02-01
и переопределить переменные в контексте нового класса
.cover-02-01 {
--a-bl-wrap-max-width: var(--const-bl-width-rgular);
--a-bl-wrap-border-radius: var(--const-bl-br-big);
--a-bl-title-font-size: var(--const-text-size-big);
}
.cover-02-01 {
max-width: 1200px;
border-radius: 60px;
margin: 60px auto;
}
.cover-02-01__title {
font-size: 64px;
}
@media (max-width: 1200px) {
.cover-02-01 {
border-radius: 50px;
}
.cover-02-01__title {
font-size: 56px;
}
}
@media (max-width: 667px) {
.cover-02-01 {
border-radius: 36px;
margin: 36px auto;
}
.cover-02-01__title {
font-size: 42px;
}
}
CSS построенный на CLVC методологии состоит из определения свойств через переменные по умолчанию и переменных определённых в контексте. Соответвенно его можно существенно минифицировать для продакшена, причем чем больше проект тем выше % сжатия.
Для средств генерирующих верстку через визуальный интерфейс (конструкторов сайтов) clvc это способ сократить объем и повысить чистоту генерируемого кода
Пример
У нас есть базовый блок - баннер с заголовком, подзаголовком и фоном на всю ширину.
Пользователь изменил ряд параметров:
- изменил размер заголовка на 58px
- установил подзаголовок 21px
- изменил размер контейнера контента на 1100px
- скруглил радиус углов блока на 30px
Один из самых лучших конструкторов (по чистоте генерируемого кода) нам сгенерирует id каждого элемента и сгенерирует css примерно следующего вида
#idcr123 {
border-radius: 30px;
}
#idcr123 {
max-width: 1100px;
}
#idbltitle123 {
font-size: 58px;
}
#idsubltitle123 {
font-size: 21px;
}
генератор кода построенный на CLVC сгенерирует следующий код
#idbl123 {
--bf: 30px;
--ad: 1100px;
--az: 58px;
--as: 21px;
}
CLVC прекрасно подходит для любого размера приложений. Объем кода с определением переменных по умолчанию не критично увеличит объём вашего кода, а в замен вы получаете готовность приложения для масштабирования до бесконечности.
Константа
--const-<уровень/назначение> -<название свойства>-<версия>
Пример:
--const-block-witdth-regular: 1200px
константа определяющая средние значение для ширины элементов уровня блок
Переменная
--a-<уровень> -<название сущности>-<название свойства>
Пример:
--a-block-container-max-witdth: var(--const-block-witdth-regular)
переменная задающая свойство максимальной ширины для обертки блока определённая константой средней ширины элемента