Всем привет! Запаситесь терпением, пожалуйста, но мне правда нужен совет
Есть компоненты формы (select, input, textarea). Select не дефолтный, а нужно стилизовать. Так вышло, что в зависимости от страницы у элементов меняется вид и я думал, все эти блоки разные (по типу функциональности), но группы элементов имеют одинаковый вид и я поступил так.
Создал блок form-element, единственное назначение которого быть миксином для стилизации групп сущностей, т.к. мне показалось странным создавать одинаковые стили для каждого компонента, DRY наше всё После этого я стал искать различия между элементами и вышло что-то невероятное
7 различных значений высоты компонента
7 различных значений размера шрифта компонента
5 различных значения bg, включая отсутствие bg
2 значения border-radius, 1 на 10px, другое на 16
Есть или нет рамки
2 значения толщины рамки
3 значения цвета рамки
3 разных значения расположения тени
Сидел, сидел и сЕдел и думал, как я "люблю" дизайнеров, но делать что-то нужно и создал я 5 модификаторов, а именно: form-elementboder(normal || bold) отвечающие только за толщину рамки
form-elementrounded(md || lg) отвечающие за значения 10 и 16
form-elementshadow(md || lg), отвечающие за тень
form-elementsize(много значений) отвечающие за высоту и размер шрифта
form-elementtheme(много значений) отвечающие за цвет фона, цвет шрифта, цвет рамки
Создал отдельно блок input, в итоге код выглядит примерно так
<div class="
input form-element
form-element_theme_first
form-element_size_md
form-element_rounded_md
form-element_border_normal
">
<input type="text" class="input__field">
</div>
.input__field {
padding: 0 16px;
margin: 0;
height: 100%;
width: 100%;
border: none;
outline: none;
background: none;
color: inherit;
}
И всё было бы ничего, но пришло время создавать select, который сейчас выглядит так
<div class="
select
select_opened
form-element
form-element_theme_first
form-element_size_md
form-element_rounded_md
form-element_border_normal
">
<select name=""></select>
<div class="select__header">
<p class="select__value">Product</p>
<span class="arrow arrow_bottom select__arrow"></span>
</div>
<ul class="select__body">
<li class="select__option">Product</li>
<li class="select__option">Product</li>
</ul>
</div>
И здесь я понял, что мне конец, ведь в зависимости от модификаторов form-element, мне нужно менять элементы компонента select, а это неправильно, потому что будут селекторы вида .class .class, но хуже всего, что модификатор одного блока будет влиять на элементы другого блока, совсем не относящегося к нему. Что я имею ввиду, в зависимости от form-element_size_md должен меняться размер select__option, в зависимости от рамки добавляться или уходить она, также про border-radius, да вообще хоть про что, плюсом идут немного разные стили, когда select развернут. В итоге, я в тупике и не знаю как быть, мои варианты были такими, создать все компоненты отдельно select, input, textarea и тупо для каждого были бы свои модификаторы, НО они были бы идентичны, т.к. select_size_md, input_size_md, textarea_size_md означали одно и тоже, это плохо, одинаковые реализации. Дальше я подумал, а что если вынести select из всей этой кучи и добавить модификаторы для него, я получил бы что-то типа select_size_md для селектов и form-element_size_md для input и textarea, но тогда мы всё равно имеем 2 одинаковых реализации. Я бы мог написать их так select_size_md, form-element_size_md, но тогда смысла в создании form-element как отдельной сущности вообще не стало.
И вопросов у меня ровно 3
1) Правильно ли я разбил на модификаторы все различия между элементами, просто их вышло так много и они по 1 строчке почти все, что я сомневаюсь в правильности?
2) Как мне быть с особенностями select компонента (описанию проблемы отдана большая часть текста)?
P.S. Возможно я не совсем корректно написал название вопроса, но моя голова кипит. Заранее спасибо
Средний
