css - 将类继承到 css 的 id 声明中 - 对此有任何讨论吗？

Question

我不确定在哪里提出这个问题。这里或 w3 联盟或 ...

引入 css 的主要概念之一是摆脱 html 页面中的额外代码。它允许清理 html，因此减少了内联样式和其他垃圾，并且 html 再次变得可读，并且更容易被读者等解析。

随着时间的推移，这个概念似乎正在消失。

例子:

<div id="MainArticle" style="border:0px; margin:10px; width:80%; color:red; align:center;">

成为

<div id="MainArticle">  

使用指向 css 文件的链接将设计的其余部分拖入。

但是，您看到的大多数现代网站代码更像:

<div id="MainArticle" class="col-md-9 col-sm-12 col-lg-8 MainArticleClass FloatingStyles OtherClass">

恕我直言，哪个 CSS 正在回到困惑的困惑局面，本应删除。

解决这个问题的一种方法是能够在 css 中声明一个 div，然后将类导入到 div 中，只留下 html 中所需的一个标识符，例如

<div id="MainArticle">

style.css
#MainArticle {
 @import col-md-9, col-sm-12, col-lg-8, MainArticleClass, FloatingStyles, OtherClass;

}

我假设像这样的东西需要相同的带宽才能下载，因为 css 文件将保持 99.5% 相同，除了 #MainArticle 声明发生变化，但是当您删除那里的类​​声明 - 总计没有使用额外的数据。

在运行时查找 css 中的导入会有一些开销，但大多数计算机都非常快，我们不会在那里谈论很多痛苦。通过仅允许 div 标识符导入类标识符，您可以摆脱循环依赖。

也许会调用特异性问题，但可能性不大。

关于这样的事情是否有任何讨论？任何指向文章等的指针将不胜感激。

我知道您可以重载 css 声明，例如您可以将 #MainArticle 添加到所有引用的 css 类的声明中，但这是维护和破坏引入的外部样式表的噩梦。

例如

.col-md-9, #MainArticle{
width:75%;
}

.col-lg-8, #MainArticle{
width:66.66%;
}

Answer 1

你可以使用 less 或 sass 代替 css

LESS 是一种 CSS 预处理器，可为网站启用可自定义、可管理和可重用的样式表。 LESS 是一种扩展 CSS 功能的动态样式表语言。

http://lesscss.org/usage/

例如

CSS 文件

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

替代上述 CSS

更少的文件

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

首先，链接您的 .less 样式表，并将 rel 属性设置为“stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载 less.js 并将其包含在页面元素的标记中:

<script src="less.js" type="text/javascript"></script>

编辑:

与其在 less.js 中使用 less 文件，不如在网页中编译 less 文件并使用生成的 css 文件您可以在

上找到有用的示例

https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

https://mayvendev.com/blog/10-less-css-examples-you-should-steal-for-your-projects