易于维护的CSS还是轻量级HTML？

我负责监督网站的整个IT方面（包括基础设施和开发），我与首席前端开发人员有不同的意见。他的方法是创建单独的类，每个类都带来一个功能，并根据需要组合多个类来设置元素的样式：

HTML
<div class="float_left padding_10 width_60_percent"></div>
<div class="float_left width_30_percent"></div>
<div class="float_left padding_10 width_10_percent"></div>
CSS
.float_left { float: left; }
.padding_10 { padding: 10px; }
.width_60_percent { width: 60%; }
.width_30_percent { width: 30%; }
.width_30_percent { width: 10%; }

到目前为止，我们一直在使用“我的”方法，我很高兴看到我们将与

id和
class`属性相关的代码百分比保持在与其他大型网站相同的比例（分别约为2%和7%）。尽管如此，为了验证这一选择，我想问以下问题，希望有经验的开发人员/网站管理员能够回答：

Q1：您是否认为这两种方法中的任何一种都有其他赞成/反对意见？

Q2：根据您的经验，是否有必要担心轻量级HTML代码，还是因为使用了压缩和其他标准（例如，您将花更多的钱与前端开发人员打交道）而忽略了这一点？

通过查看结果，您将看到与
id
和
class
属性相关的代码量似乎存在一种模式（尽管我知道扫描更多网站会提供更准确的图片）：

-所有网站大约有1%到2%的HTML代码与
id
属性相关。

-其中4个网站约有7%的HTML代码与
类相关


-其他人大约有20%的HTML代码与
类相关

Q3：对于这些模式，是否有技术上的解释（例如Facebook和Stackoverflow是否使用相同的框架来生成CSS？
您的前端开发人员所做的被称为面向对象的CSS（OOCSS），一些人认为这有助于提高您网站的速度

我不想在这里重新讨论OOCSS的论点，所以请阅读以下常见问题：


编辑：在编码标准方面，我宁愿选择facebook/stack而不是amazon/ebay。注意，更进步的网站（fb/stack）似乎有更高的等级百分比？
我最近看到一篇来自谷歌的文章，显然鼓励oocss方法，但它几乎肯定会创建更大的html和css，这在更大的网站上真的很重要

我从未见过使用oocss的开发人员，这让我建议，如果该网站正在由其他开发人员开发，或者很可能是在将来，那么最好采用一种更多开发人员遵循的方法，我是一个公司web软件项目的前端开发人员，大约有50人编写代码，大多数都是后端的。起初，我同意使用尽可能少的类，在css中使用大量继承，以使代码更轻。所以我们一直在使用“尽可能少的类”的方法

A1：使用少数类的方法，许多css定义将使用元素名称来添加样式，类似于
。左列部分li a
这使开发人员的工作更轻松，但实际上会使css速度变慢，因为css是从右到左分析的。在我的示例中，浏览器首先检查所有链接，然后检查所有列表元素，依此类推。如果我只使用了
a.lc-link
，css的使用速度会更快，可以查找的元素也会更少

我们遇到的另一个问题是缺乏模块化。我可以设计一个很好的元素，我们称之为
。航班日期
，效果很好。然后出现了一个新的用例，有人希望在一个表单的中间使用，而不是S一个主页面模块。但是表单的构建是为了在表单标记上使用单个类，其他所有内容都使用继承。所有的继承都会污染.flight dates，因此我需要返回并为css添加更高的特定性，因此所有的.flight dates样式都有一个额外的定义，当它们是表单的子项时

这种事情每周发生3到4次更少的类=更少的灵活性+具有非常高特异性的丑陋样式表，这就是我从中吸取的东西

A2：随着页面上出现大量javascript，使用的类数量现在几乎无关紧要了。据我所知，这对DOM操作速度没有任何影响。因此，我们已经失去了从少数课程方法中获得的任何优势

关于您的测试，请记住，下载css和解析css不是一回事

此外，前面提到的css修改实际上使后端和前端开发人员的速度都变慢了。因为我们试图使用尽可能少的类来简化后端的工作，所以后端的组件会像婴儿一样哭，如果你把它们放在一个新的环境中，前端必须更改他们6个月前编写的css。我个人已经浪费了几个星期

我会说这会使工作变得更慢，而且没有值得讨论的性能优势

A3：像Sass和Less这样的东西往往会导致css中的常见模式。此外，许多好的网格和相关的css框架都使用通用的类名。想想jQueryUI或960网格

如果您想从我们的错误中吸取教训，请听前端人员的话。
您的后端人员会更高兴，因为组件总是按照他们期望的方式运行。
您的前端人员会更高兴，因为他们将能够编写健壮、激发并忘记css，而不必在每次出现新用例时都重复使用它们。
你的html会大一点，但老实说，差别是可以忽略的，我不相信这会导致任何重大的瓶颈。
你的css会运行得更快。
工作最终会花费更少的时间。
+1用于提及
OOCSS
。我正在浏览你链接的常见问题，然后
HTML
<div id="column_left"></div>
<div id="column_middle"></div>
<div id="column_right"></div>
CSS
#column_left { float: left; padding: 10px; width: 60%; }
#column_middle { float: left; width: 30%; }
#column_right { float: left; padding: 10px; width: 10%; }

<?php
require_once 'simple_html_dom.php';
$pages = array('http://www.amazon.com', 'http://www.ebay.com', 'mywebsite.html', 'http://stackoverflow.com','facebook.html');
foreach ($pages as $page) {
    echo "\n$page\n";
    $html = new simple_html_dom();
    $string = file_get_contents($page);
    $total = mb_strlen($string);
    echo "HTML = " . $total . " characters\n";
    $html->load($string);
    foreach (array('id', 'class') as $attribute) {
        $count = 0;
        $elements = $html->find("*[$attribute]");
        foreach ($elements as $element) {
            // length of id or classes, + id="..." or class="..."
            $count = $count + mb_strlen($element->$attribute) + mb_strlen($attribute) + 3;
            //echo $element->$attribute . "\n";
        }
        echo "  -from $attribute attributes = $count -> " . round($count / $total * 100) . "%\n";
    }
}

http://www.amazon.com
HTML = 101680 characters
  -from id attributes = 943 -> 1%
  -from class attributes = 6933 -> 7%

http://www.ebay.com
HTML = 71022 characters
  -from id attributes = 1631 -> 2%
  -from class attributes = 4689 -> 7%

ourwebsite.html
HTML = 35929 characters
  -from id attributes = 754 -> 2%
  -from class attributes = 2607 -> 7%

http://www.imdb.com/
HTML = 74178 characters
  -from id attributes = 1078 -> 1%
  -from class attributes = 5653 -> 8%

http://stackoverflow.com
HTML = 204169 characters
  -from id attributes = 3376 -> 2%
  -from class attributes = 39015 -> 19%

facebook.html
HTML = 419001 characters
  -from id attributes = 6871 -> 2%
  -from class attributes = 85016 -> 20%