有没有办法在 HTML 和 CSS 之间共享类和属性？

问题描述

我正在尝试建立一个易于扩展的代码库架构，并希望为类和属性拥有单一的真实来源（然后我可以在我的项目中的任何 HTML 和 CSS 文件中使用它们）。类似于 TypeScript 对类型定义所做的。

我的目标是，如果我决定更改类名或属性，我只需在一个地方进行。

这看起来像这样： （注意：如果有处理编译的库或中间模板语言，实际的文件扩展名很可能会有所不同）

class.deFinitions

card: '.card',redCard: '.card--red',cardItem: '.card__item',//...more class deFinitions

属性.定义

 cardState: {
   convertsTo: 'data-card-state',allowedValues: 'active' | 'inactive' | 'disabled'
 }
 
 //...more attribute deFinitions

index.html

@import { * as "c" } from class.deFinitions
@import { * as "a" } from attribute.deFinitions

<div class="c.redCard" a.cardState="active"></div>

// the above would,for example,give an error if the cardState attribute had been assigned a 
// value that wasn't part of the allowed values in the attribute deFinition.
// also,after typing 'c.' you would get intellisense and auto-completion for the available 
// classes in your deFinitions file.
// Note that,although redCard is defined as ".card--red",in the HTML it would be compiled as
// just class="card--red" (without the dot).

style.css

@import { * as "c" } from class.deFinitions
@import { * as "a" } from attribute.deFinitions

c.redCard {
  background-color: red;
}

/*
This would compile to:
.card--red { background-color: red; }
*/

此后，对类名或属性允许值的任何更改都只会发生在定义文件中。而且，任何更新都会自动反映在编译的 HTML 和 CSS 中，只要有引用值被使用。

目前是否有任何可用的方法来执行此操作（或类似方法）？

预先感谢一百万的支持。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）