Question

我主要是后端程序员，对CSS来说相对较新。到目前为止，我讨厌它。我最大的抱怨是难以置信的冗余，难以生成可读的代码。

很多时候我需要将样式应用于不同但相似的元素。但是，我发现制作优雅的代码是非常具有挑战性的。

在CSS中执行操作的最简单方法似乎是为所有内容提供ID，并为页面中的每个元素使用自定义代码，或者在有重复元素时使用类。然而，这仍然留下了很多重复的代码，就像我有两个几乎完全相同的元素，但有一个或两个不同的属性，如宽度，背景颜色，颜色或浮动边。

我目前的解决方案是定义许多原子类，比如

.bgRed { background-color: red; }
.bgBlue { background-color: blue; }
.fontCenter { text-align:center; }
.left { float: left; }

等等，并将多个类应用于元素，如下所示：

<span class='bgRed left' >My text</span>

但那还不错。一些属性，如宽度和高度，通常与它的元素紧密相关，因此我不能为它创建一个原子类，并最终使用它的ID。

最后，我的问题：为什么CSS不支持某种类似函数的结构？像这样的功能会在CSS中有用吗？ CSS设计不当或者我只是不知道如何正确使用它？为什么CSS的设计方式如此？

我在css中想象的功能如何起作用：

定义css函数：

_sidebar(float_side, color, width){
    float: float_side;
    backgroud-color: color;
    width: width:
    height: 200px;
    color: #FE02A5
    list-style: none;
    display: table;
}

申请：

<div cssfunc='sidebar(left, #FF0000, 150px)' >
    <ul>
        <li>Item One</li>
        <li>Item Two</li>
    </ul>
</div>

额外问题：如何使用最少的代码重复来维护CSS代码的可读性和组织性？

Answer 1

这不是CSS的预期用法模式。一般的线索是，如果您的班级名称中有特定的格式化词语，如颜色或路线，那么您就不会遵循CSS的“精神”。

CSS类的目的是为类名使用语义类别。例如，不要使用名为bgRed的类，而是使用名为warning的类。在某些情况下，差异可能很微妙，但哲学上的差异通常有助于维护。不要在元素级别组合“文字”css规则，而是组合更有意义的语义规则，如class="sidebar warning"。

话虽如此，有些人仍然发现CSS规则之间缺乏格式化的可重用性很麻烦。也有修复方法。最好的解决方案是使用CSS预处理器，如LESS或SASS。这些语言编译成CSS，但支持mixins和变量之类的东西，其作用与你想到的css增强非常相似。

Answer 2

HTML定义了要显示的内容，CSS定义了如何显示它。如果你使用像“bgRed”或“left”这样的类，你就是这样做的。

CSS没有定义支持功能，但是LESS没有。想象一下：

.sidebar(@side, @color, @width) {
    float: @side;
    backgroud-color: @color;
    width: @width:
    height: 200px;
    color: #FE02A5
    list-style: none;
    display: table;
}
.sidebar-important {
    .sidebar(left, red, 100px);
}
.sidebar-misc {
    .sidebar(right, blue, 50px);
    color: grey; // overwrites .sidebar function
}

然后在HTML中：

<div class="sidebar-important">Important news</div>
<div class="sidebar-misc">Something else</div>

这样，您可以轻松更改LESS文件中的值，将其编译为CSS，您无需在HTML中更改它。

奖金回答：以下。

为什么CSS不支持类似函数的结构？

2 个答案: