我负责监督网站的整个IT方面（包括基础设施和开发），我与主要前端开发人员有不同的意见。他的做法是创建单独的类，每带来一个功能，并根据需要样式元素组合成许多类：易于维护CSS或轻量级HTML？
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%; }
优点：
- 通过HTML CSS的理解：只需查看HTML中的类名，就可以了解CSS正在做什么。
- 轻松创建的：一旦你有你的定义的类集，它只是一个他们在HTML结合的事，你不必不断谱写新的CSS。
- 易维护性：与上述相同的原因。
- 便携：您可以使用相同的方法为大家讲解工作的任何网站（这是有道理的，他，因为他是在不同的项目工作的承包商）。
- 较小CSS：只要你的布局达到由此相同的类被再次和重新使用再次（这将是一个适当的布局的情况下，一定的临界尺寸，但显然不会因上述反射例子的简洁）。
缺点：
- 更大的HTML。
- HTML难以阅读，如果你不感兴趣的CSS部分（其中我的后端开发人员创建的意见都没有）。
- 更难基于类选择（我们使用jQuery）整合的JavaScript。
我的方法并非由编写/维护CSS本身的容易所决定，而是担心我们的HTML代码的很大一部分将仅用于整合我们的CSS，这会影响性能：我相信最好有一个更大的CSS被获取和缓存一次，而更小的HTML可以为每个页面视图节省带宽，而不是相反。因此，我会选择以下方法：如上述
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%; }
优点/缺点
对面。
我觉得有一个轻量级的HTML代码是实现您的网站增长的关键：
- 页面加载将更快，这将有助于搜索引擎优化和用户体验。
- 可以为相同的带宽提供更多页面，从而节省您的基础架构成本。
在试图得到一个事实上的答案，我们扫描的“大”网站，看看被分配到使用ID和班级是什么HTML的一部分。下面是代码：
<?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%
到目前为止，我们已经使用了“我”的做法，我很高兴看到我们保持的百分比与其他大型网站相同比例的id and类属性的代码（分别约为2％和7％）。尽管如此，为了验证这一选择，我想问以下问题，我希望有经验的开发人员/网站管理员能够回答：
Q1：您是否看到其他优点/缺点赞成/反对2种方法？ Q2：从您的经验来看，是否担心使用轻量级HTML代码至关重要，还是因为使用压缩和其他标准而忽略了这一点（例如，您将花费更多资金与您的前端开发人员争夺） ）？
通过查看结果，你会看到有似乎是在代码有关id和class属性量的模式（虽然我知道扫描更多的网站会提供更准确的图片）：
- 所有网站都有大约1％到2％的与id属性相关的HTML代码。该网站的
-4大约有7％的相关classes他们的HTML代码。
-the等都有20％左右的相关classes他们的HTML代码。
Q3：是否有这些图案的技术说明（例如在Facebook和＃2使用相同的框架来生成自己的CSS）？
提及'OOCSS'的+1。我正在浏览你链接的常见问题，并且不同意'更小的文件，因此更快的传输参数，原因如下：你的'CSS'将被提供和缓存一次，你的HTML是动态内容，因此会影响每个页面视图。我同意你关于编码标准和更高阶级比例的观点。 – Max