CSS如何对class进行分类？

Question

我在写前端的时候，比如想基于一些种类对class进行区分，我按照以下方式可进行种类的区分：

<div class="container ; bg-slate-200 bg-repeat ; rounded-xl" >
  <div>
    1
  </div>
  <div>
    2
  </div>
</div>

1.请问上面的方式是否有缺点呢？
2.请问除了这种方式还有其他方式可以吗？
以下的方式没有成功：

<div class="container" class="bg-slate-200 bg-repeat" class="rounded-xl">

Answer 1

不能用多个 class 的形式去区分，而且没有必要。
并且最终生效的权重还是实际CSS类名的在样式表中的先后顺序，并不会有什么影响。

---

如果说你一定要区分，并且使用的是 vue 技术栈的话，可以通过这样的方式去绑定：

<div
  :class="[
   'container',
   'bg-slate-200', 'bg-repeat',
   'rounded-xl"'
  ]"
>
</div>

但其实并没有必要，只是在徒增心智负担。

只需要你在书写的时候按照一个规则排序就好了。比如说我会比较喜欢按照这样的顺序来排序：
自定义组件类名 + 语义理解的公共类名
所以使用 tailwind 的时候就会书写成这样：

<!-- 顶部菜单、flex布局、flex折行、中间间距、垂直居中 -->
<div class="top-menu flex flex-wrap justify-between items-center"></div>

同样的我在书写 CSS 属性的时候也会按照这样的顺序来书写，基础属性，然后由内而外。

// stylus
.top-menu
  // 基础属性
  width 100vw
  height 100px
  // 文字属性
  line-height @height
  font-size 14px
  text-align center
  // 容器背景
  background black
  // 内填充部分
  padding 0 10px
  // 边框部分
  border 1px solid blue
  border-radius 4px
  // 外边距部分
  margin 50px auto
  box-shadow 3px 3px 5px rgba(black, .1)
  // 容器类型相关
  display flex
  flex-wrap wrap
  justify-content space-between
  align-items center
  box-sizing border-box
  // 定位部分
  position fixed
  top 0
  left 0 

不过这些都是一些代码书写的习惯而已。除了可以帮阅读之外并没有什么实际的作用。

Answer 2

你可能需要 Tailwind CSS ？

• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

优势就是，直接拷贝基础样式库后，改 DOM 的 class 就可以快速组合出来样式，缺点就是 DOM 会看起来臃肿那么一些，对于不熟悉的人来说，样式调试起来相对麻烦一些。

Answer 3

不用考虑这种事情，投入产出比太低。