Есть ли способ «связать» правила из фреймворка CSS, чтобы я мог СУШИТЬ свой HTML, не используя шаблоны SASS или JS? - PullRequest
Новая
       11

Есть ли способ «связать» правила из фреймворка CSS, чтобы я мог СУШИТЬ свой HTML, не используя шаблоны SASS или JS?

2 голосов
/ 02 мая 2019

Я продолжаю сталкиваться с этой проблемой с такими фреймворками CSS, как Material. Естественно, они требуют, чтобы вы использовали кучу классов. Но это означает, что ваш HTML начинает становиться супер-СУХОЙ с огромными и повторяющимися class="" атрибутами.

Например, вы получаете такие вещи, как: 

<div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>

Обычные способы решения этой проблемы:

1. Используйте SASS или LESS

import фреймворк CSS, затем создайте свои собственные правила CSS, которые включают в себя / расширяют / смешивают классы из фреймворка. Например, 

.mybutton{
  @extend .css-framework-class-1, .css-framework-class-2, .css-framework-class-3;
}

<div class="mybutton"></div>

... но когда мой CSS компилируется, он дублирует CSS всех тех классов, которые я @extend редактировал. Это серьезно увеличивает размер моего скомпилированного CSS.

2. Использовать компонентный CSS

... или иным образом использовать пользовательские компоненты и директивы. Псевдокод: 

new Template('mybutton', ()=>{
  return <div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>
})

<mybutton></mybutton>

Но если я уже не планирую использовать инфраструктуру JS, я не хочу включать Webpack или Gulp и несколько JSX для решения проблем CSS.

Вот моя идея:

Я пишу свой HTML с пользовательским атрибутом, например так: 

<div custom-attribute="mybutton"></div>

Затем в файле JSON / YAML / что-то я сопоставляю то, что вставил в свой пользовательский атрибут, с правилами CSS из фреймворка: 

{
  "mybutton": "css-framework-class-1 css-framework-class-2 css-framework-class-3"
}

Затем я пишу некоторый интерфейсный JS, который ищет этот пользовательский атрибут, отображает его значение с помощью файла JSON и преобразует мой HTML-код выше в следующее: 

<div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>

Таким образом, я мог бы использовать фреймворк и сортировать его классы так, чтобы мои пользователи не загружали кучу избыточных CSS.

Это сумасшедшая идея? Уже есть какой-нибудь пакет JS, который делает это?

...