FunctionalCSS：从尝试改进可重用CSS开始

时间：2023-03-30 16:51:01 CSS

从尝试改进可重用CSS开始做破雪4K视频回想每次更新破雪网站，最让我头疼的就是重写CSS。在不同的阶段，对CSS的不断深入理解，网站内容的调整，UI复用的需要，都会影响到CSS的写法。因此，一不小心，你的代码理解就会充满各种风格和风格。各种功能的CSS，一想到这些就很不爽。因此，我将一些经验分享给大家，如何理解CSS，以及如何更有效地编写CSS。让我们从基于语义的CSS开始首先，让我们从最简单的例子开始。回想一下您的第一个CSS示例，它必须类似于以下内容。所谓CSS表达了页面DOM的样式：Helloworld！

然后，在text-center中，我们指定文本居中对齐的样式：.text-center{text-align:center;}很简单吧？随着写的样式越来越多，我们很快就会开始关注写CSS的一些建议。例如：HTML和CSS的职责应该分开。HTML不应包含任何与特定样式相关的信息（例如居中对齐），这些特定样式应在CSS中处理。因此，我们开始尝试用它所表达的语义来代替该样式所表达的具体样式：Helloworld!

这看起来好多了。无论.greeting指定的具体样式如何，都不会影响HTML中问候消息样式的含义。这样，理论上我们就可以使用一套HTML模板来实现各种UI风格。因此，我们开始基于这种语义方法编写各种接口。比如我们添加一个代表视频作者的信息卡片，它的HTML模板如下：

Mars

boxue.io的创建者。blablabla...

同样，在这个模板中，creator-info是一种根据语义命名的样式。接下来就是这个样式的实现：.creator-info{background-color:white;边框：1px实心rgba(0,0,0,0.1)；边界半径：4px；框阴影：02px4pxrgba(0,0,0,0.1)；溢出：隐藏；>img{显示：块；宽度：100%；高度：自动；}>div{填充：1rem;>h2{字体大小：1.25rem;颜色：rgba(0,0,0,0.8)；}>p{字体大小：1rem；:RGBA(0,0,0,0.75);行高：1.5；看起来是这样的：在这里，我们关注的不是这些样式的具体内容，而是这个CSS的结构，如果我们把具体的样式都去掉，你会发现这个样式严重依赖于HTML中DOM的层次结构：.creator-info>img>div>h2>p因此，尽管在HTML中在中，我们依靠基于语义的样式来剥离CSS，但这种方法很容易在CSS中暴露过多与HTML相关的细节。因此，这种做法实际上并没有完全达到剥离CSS和HTML职责的目的。我们需要更好的实践。将样式与DOM结构分离为了避免样式依赖于DOM结构的问题，我们的想法是：让样式的命名方式兼具格式和语义的功能。然后，在DOM中，对不同位置的元素使用相应的样式。这里，我们借鉴BEM的命名方式，对于我们要使用的样式名称，统一使用这种命名格式：subject-subject-dependentcontent__contentattribute:

Marsboxue.io的创建者。Blablabla...