时间戳

首页 > 解决方案 > CSS 中的常用类、助手类和实用程序类是什么？

css - CSS 中的常用类、助手类和实用程序类是什么？

问题描述

我是 CSS 新手。我很困惑。什么叫可重用类？

/* Common classes, helper classes, or utility classes */

.border-radius{
  border-radius: 10px;
}
.container{
  max-width: 1200px;
}
.row{
  display: flex;
  flex-wrap: wrap;
}

标签： css

解决方案

简短而有意义的东西通常是最好的。每个班级应该只做一项工作。例如，

.flex {
   display: flex;
   align-items: center;
}

这不会很好地扩展，因为将来你可能想要一个 flex，align-items: flex-start然后你需要创建一个新类。

缩短类名真的很有帮助。你通常会编写很多边距类，所以不要调用margin-right-10只是调用它mg-r-10甚至更短mgr10。但小心点。确保不要让它简短且不可读。

您可以做的最好的事情之一是观察其他框架并查看它们使用的模式，例如Bootstrap和Tailwind CSS。

推荐阅读