html - 广泛使用类来减少 CSS 大小

标签 html css

我正在努力减少我的 CSS 文件的大小。 我想到了以下技巧:

我有几个使用相似属性的元素,比如

.a {
   float:left;
   /* Other properties */
}

.b {
   float:left;
   /* Other properties */
}

.c {
   float:left;
   /* Other properties */
}

所以,我想,为什么不制作一个单独的类选择器,比如 k:

.k {
    float: left;
}

然后为需要 float:left 的元素包含类选择器 k。因此,我们可以从 .a.b.c 中删除 float: left 行。类似地,我们将具有所有常见属性的类选择器,例如 float:rightfont:normal normal normal 16px/normal arial,sans-serif。这将在 CSS 文件中节省大量字符,并导致 html 文件的大小略有增加。

您如何看待这种方法?你会做吗?有什么陷阱吗?

最佳答案

我认为您在这里有多种选择:

  1. 使用 Less CSS 在您的 CSS 中提供继承和混合功能
  2. 使用 Grid 960 制定语义 CSS 规则的系统(如您描述的 float )
  3. 为您的元素定义语义类以同时处理多个元素,当然,还可以通过多个类处理一个元素。例如,一个元素可以有这些类:class='float-left button width-10'

但要注意不要陷入身份和类(Class)的概念中

关于html - 广泛使用类来减少 CSS 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6854374/

相关文章:

JavaScript 不会从 HTML 输入元素中获取值来绘制动画

html - VBA 与网页上的单选按钮交互

html - 由于 viewwidth,iPhone 4(仅限)将 div 拉伸(stretch)出屏幕

javascript - 如何在给出提示后将函数的结果输出到同一个 HTML 页面?

php - 如何在提交时弹出联系表单在弹出窗口中显示确认消息?

javascript - 在 Adob​​e Air 中将相机视频源附加到 html

html - 有没有办法让导航器在标题之后跟随屏幕?

CSS 内容在某些情况下不起作用

jquery - Js Animate 在 IE8 下无法正常工作

javascript - 变换 : rotateX in jquery . 动画函数