class的语义化和代码复用，不可调和的矛盾

[zzzcsd]

.center{
    margin-left: auto;
    margin-right: auto;
}

定义上面一个类，然后有需要横向居中的元素，就加上这个类，就可以自动居中了，从此就可以过上幸福快乐的日子了。
然而，有些人会说，这不符合语义化的原则，类名不应该暗含样式。
好，遵循语义化的原则，写成下面这样：

.footer{
    margin-left: auto;
    margin-right: auto;
}

这样又会有一个问题，无法做到代码复用，所有需要居中的元素，都要在对应的选择器中，添加这两行样式。

这个矛盾如何解决？

本贴分数100分，答对的，额外赠送200分，答非所问灌水的，一律举报

[天际的海浪]

要复用可以

.footer , .abc , #xyz {
    margin-left: auto;
    margin-right: auto;
}

这样 .footer .abc #xyz 这三个选择器都有了以上样式。

[反重力落叶]

你可以看一下sass或less，这是一种预处理技术，可以很好的解决你的问题，在这种技术也可以将样式作为一种函数传参数等等，复用性特别强

[反重力落叶]

再补充一句，如果你没学过，看看，这种技术很简单的，我推荐sass,因为它类似css格式，而且用的人也比较多

[越来越好。]

我也有这种疑惑。。。

[文盲老顾]

引用 楼主 zzzcsd 的回复:

.center{
    margin-left: auto;
    margin-right: auto;
}

定义上面一个类，然后有需要横向居中的元素，就加上这个类，就可以自动居中了，从此就可以过上幸福快乐的日子了。 然而，有些人会说，这不符合语义化的原则，类名不应该暗含样式。 好，遵循语义化的原则，写成下面这样：

.footer{
    margin-left: auto;
    margin-right: auto;
}

这样又会有一个问题，无法做到代码复用，所有需要居中的元素，都要在对应的选择器中，添加这两行样式。 这个矛盾如何解决？ 本贴分数100分，答对的，额外赠送200分，答非所问灌水的，一律举报

.center 这个选择器在我看来没有什么不合适的，就像bootstrap的样式一样，justify-content-between这样的定义比比皆是，说白了，样式名不管是类名也好，id也好，甚至标签也好，他们的命名都是为了更加易读，可以直观的推测出最终样式效果的，达到这个效果就可以了 比如标签，header就是定义头的，footer就是定义页尾的，content就是定义正文的，nav就是定义导航的，这些标签seo也是承认的 比如ID，search就是搜索，slide就是滑动切换，logo就是图标，也是一目了然 比如样式名，.center就是居中，不管什么布局flex也好，block也好，能达到同样效果就可以，.disabled就是未启用，.hover就是鼠标悬停，.selected就是选中，bootstrap里这样的命名还是很多的 所以说，语义化的原则，类名不应该暗含样式，这个是什么说法？ https://blog.csdn.net/chelen_jak/article/details/24870047