Question

我正在进行远征以减少CSS文件的大小。我想到了以下技巧：

我有几个使用类似属性的元素，比如

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

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

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

所以，我想，为什么不创建一个单独的类选择器，比如k：

.k {
    float: left;
}

然后包含类选择器k，以用于需要float:left的元素。因此，我们可以从float: left，.a和.b移除.c行。同样，我们将为所有常见属性（如float:right，{{}提供类选择器1}}。这样可以节省CSS文件中的大量字符，并导致html文件大小的小幅增加。

您如何看待这种方法？你会这样做吗？有没有陷阱？

Answer 1

我认为你有多种选择：

使用 Less CSS 在CSS中提供继承和mixin功能
使用 Grid 960 系统制作语义CSS规则（如您所说的浮动）
定义元素的语义类，以便同时处理多个元素，当然，还可以通过多个类来解决一个元素。例如，元素可以包含以下类： class ='float-left button width-10'

但要小心不要陷入神圣和阶级的概念

Answer 2

我建议认真考虑使用类似Saas的内容来获得更易于管理和可读的CSS

如果您因为性能原因而担心css文件的文件大小，那么您应该考虑使用YUI Compressor

之类的内容来最小化css

Answer 3

大多数情况下，您的大部分css都在每个页面使用的一些外部工作表中。这些被缓存，因此它们只需要加载一次。此外，您不应该牺牲标记或CSS的可读性来获得难以察觉的性能提升。语义标记是关键。

Answer 4

事实上，这是正确的做法。使用CSS类中的继承不仅仅是简单的样式表，它还使它易于管理。此外，您可能需要在最终输出中缩小css，以最大化其性能。

Answer 5

如果您想减少网站上的CSS数量，您应该关注面向对象的CSS。这是一个快速介绍：

http://net.tutsplus.com/articles/lectures/the-top-5-mistakes-of-massive-css/

它以Facebook为例，以及他们如何减少CSS ......

Answer 6

即使后来的HTML规范最终谈论class属性，我们可以通过早期的规范和讨论看到它有更深层的含义。 HTML class属性背后的基本思想是语义上对HTML元素进行子类化。这些伪元素对于您想到的应用程序非常有用，它可以进一步指定标记中包含的数据类型。这意味着提供有关数据的数据。此数据称为metadata。样式表只是class属性的一个应用程序。样式表可以利用这个只是一个快乐的结果。 HTML class属性用于语义，而不是用于样式。

如果您仅为了演示目的而添加类，并且为了减少CSS文件的大小而滥用类。

请注意，CSS性能比下载大小更多。从长远来看，渲染性能可能更为重要。我建议你做以下事情：

使用Speed Tracer或Page Speed 等工具分析您网站的效果
最小化CSS文件
删除未使用的CSS
使用本问题的其他答案中列出的一些CSS框架

有关性能的更多信息，我强烈建议您使用MIX11会话“50 Performance Tricks to Make Your HTML5 Web Sites Faster”。这是必须看到的！

您还可以使用 grouping ：

在不同的班级之间分享样式

.a
{
    /* Other properties */
}
.b
{
    /* Other properties */
}
.c
{
    /* Other properties */
}

.a, .b, .c
{
    float: left;
}

如果您有兴趣，我已经在我的博客文章“The HTML class attribute: for styling purposes only?”中广泛撰写了有关HTML类属性的用途。

广泛使用类来减少CSS大小

6 个答案: