Вопрос по веб-дизайну

В данном случае все проще, это просто эффект Даннинга — Крюгера

Это вы о себе по ходу :)

Итак, вот что я надумал.

Определяются основные переменные палитры, цвета фона, текста и ссылок соответственно

:root {
 --canvas0: #цвет;
 --canvas1: #цвет;
 --canvas2: #цвет;
 --canvas3: #цвет;
 --paint0: #цвет;
 --paint1: #цвет;
 --paint2: #цвет;
 --paint3: #цвет;
 --link0: #цвет;
 --link1: #цвет;
 --link2: #цвет;
 --link3: #цвет;
}

Разработчик при создании компонента не думает о дизайне и цветах, просто указывает переменные, например для основного фона --canvas2 для тёмного блока --canvas0 для светлого блока --canvas3 для текста тёмного блока --paint0 ну и так далее

А когда нужен блок с другими цветами, то подключаем класс с другой палитрой, в которой те же переменные, но с другими значениями цвета. Указываем этот класс в блоке и блок будет выводится в других цветах.

.color1 {
 --canvas0: #цвет;
...
 --canvas3: #цвет;
 --paint0: #цвет;
...
 --paint3: #цвет;
 --link0: #цвет;
...
 --link3: #цвет;
}
<div class=color1>содержание блока</div>

А может однобуквенные с числом всё таки лучше?

В данном случае, разрабатывается иной подход для движка в котором sass, less применятся не будут.

Ну то есть ты «изобрел» примитивнейший аналоге препроцессора и считаешь что так удобнее?

Ну раз уже придумал то еще подумай: Как пользователь который будет определять секцию root будет знать что canvas0 это светлый а canvas2 это основной цвет? и как это все поймут разработчики модулей/компонентов?

7 страниц и ТС начинает немного вдуплять в то что ему тут пытаются донести. Я просто понял что мы зашли слишком издалека. Между тем о чем говорим тут мы и то что решает ТС пропасть киллометровая, мы чуть позже дойдет до mobile-first, переиспользование css и возможность вставить блок в любое место не боясь что на него повиснет эффект от класса .color1

---------- Добавлено 27.12.2019 в 19:42 ----------

он пока еще ничего не изобрел, он просто на днях прочитал о переменных css и у него родилась "гениальная" идея.

---------- Добавлено 27.12.2019 в 19:49 ----------

сейчас ТС пытается несколько дней придумать вот это (variables), но пока дело дошло только до цвета

Потом глядишь допрет до инструментов работы с цветом.

правда не совсем понимаю пока при чем тут xml-framework

Цвета указываются от тёмного 0 к светлому 3

учите матчасть css переменных

Я о переменных знаю с момента их появления, и это не гениальная идея, для этого они и разработаны, но практически не используются должным образом.

Если вы про них только узнали, не говорите за других) везде и давно используются

Bootstrap это кучамала некоторых нужных и остальных не нужных стилей. Мне его придумывать не зачем, пользуйтесь, оно вам облегчит рутинную работу :)

А xml-framework основан на структурировании в xml данных узлов и макетов компонентов с стилями. Мне не нужно кучамала стилей бутстрапа и препроцессоры стилей, так как макет компонента строится html разметкой и в стилях компонента простой css, но цвета будут указываться переменными var(--*).

Разработчик заходит в админку настраивает палитры цветов, в структуре в блоке указывает нужную палитру, всё.

---------- Добавлено 27.12.2019 в 16:54 ----------

Выше же я написал, что знаю о переменных уже давно(вы читать не умеете..). Я и не говорил, что другие не используют, но для смены дизайна сменой класса с определением переменных это мало где используется, в основном как константы чтобы не менять во всём файле значения.

Вы спросили мнение тех кто занимается. Вам ответили - вы заняты чепухой.

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

Современный IT это не про выигрывание пары байт на длине переменных, а про читаемость и переиспользование кода, простоту поддержки, скорость внедрения решений. Пока вы будете мыслить PUKE и POKE (вряд ли вы поймете о чем я) другие объединяются в команды, используют инструменты быстрой разработки, понимают где нужен БЭМ, где атомарный CSS, а где CSS переменные и создают удобные работающие продукты.

если вы хотите описывать стандартные элементы, то надо пользоваться БЭМ или похожей методологией.

их тогда очень легко применять. Например:

<input type="submit" value="сохранить" class="button button__red" />

и

<a href="#submit_ajax" data-action="submit" class="button button__red" >сохранить</a>

будут выглядеть одинаково и не надо изобретать никаких велосипедов. Всё уже изобретено давно (парни из яндекса не глупее вас, в конце концов.)

не надо изобретать велосипедов, тогда в вашем коде будет легко разбираться другим людям. А это первый признак хорошего программиста или верстальщика.

тогда стили будут выглядеть

layouts.css

.button{

    display: inline-block;

    background-color: transparent;

    border: #f0f0f0 solid 1px;

    font-size: 1.6rem;

    line-height: 100%;

    padding:8px 16px;

    margin:0 5px 0 0;

    white-space: nowrap;

}



styles.css

.button__red{

    background-color:maroon;

}

.button__red:hover{

   background-color:crimson;

}

и всё. теперь вы можете накидывать стили элементов когда угодно, причем легко и непринужденно.

правда, для этого необходимо всю верстку делать с учетом подобной структуры

в данном случае он не эту проблему (ну это у него проблема, так то проблемы никакой нет) пытается решить, он хочет менять "шкурку" исключительно для background-color из вашего примера.

Типо мифический конь в вакуме сделает default шаблон, на котором будут строить все свои сайт (не опечатка), вместо цветов будут проставлены как в вашем примере .button_red {background-color: var(--c0);} а какой то хрен (но скорее всего ТС и автор, так как этим больше никто не будет пользоваться), будет просто накидывать классы в которох будет менять --c0: blue и вот уже ваша .button_red вовсе и не ред нифига, по этому верстать будут примерно так же <input type="submit" class="b1 c0 l2 p3"> ну и так далее по задумке автора... он это методику придумывает уже много дней, так как БЭМ придумали для верстальщиков которые делают какаху и ГСы.