Question

我负责监督网站的整个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%; }

优点：

- 通过HTML理解CSS ：只需查看HTML中的类名，即可了解CSS的用途。
- 易于创建：一旦定义了一组类，只需将它们组合在HTML中，您就不必经常编写新的CSS。 - 易于维护：与上述原因相同。
- 可移植性：您可以对您工作的任何网站使用相同的方法（这对他来说是有意义的，因为他是从事不同项目的承包商）。 - 较小的CSS ：只要您的布局达到一定的临界尺寸，即相同的类一次又一次地重复使用（适当的布局就是这种情况，但显然没有反映出来）以上是因为例子的简洁。）

缺点：

- 更大的HTML 。
- HTML难以阅读如果您对CSS部分（我的后端开发人员创建视图不感兴趣）不感兴趣。

- 更难集成基于类选择器的Javascript （我们正在使用jQuery）。

我的方法不是由编写/维护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代码对于实现网站增长至关重要：
页面加载会更快，这将有助于SEO和用户体验 - 可以使用相同的带宽提供更多页面，从而节省基础架构成本。

为了获得事实上的答案，我们扫描了“大”网站，以查看HTML的哪一部分已分配给使用ID和类。这是代码：

<?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%

到目前为止，我们一直在使用“my”方法，我很高兴看到我们将与id and class`属性相关的代码百分比保持在与其他大型网站相同的比例（周围）分别为2％和7％）。尽管如此，为了验证这一选择，我想问下列问题，希望有经验的开发人员/网站管理员能够回答：

Q1：您是否看到其他优点/缺点支持/反对两种方法中的任何一种？

Q2：根据您的经验，担心使用轻量级HTML代码是否至关重要，或者使用压缩和其他标准可以忽略这一点（例如，您将花费更多资金与前端开发人员进行斗争）？

通过查看结果，您会发现与id和class属性相关的代码数量似乎存在模式（虽然我知道扫描更多网站会提供更多准确的图片）：
- 所有网站的HTML代码约有1％到2％与id属性相关其中-4个网站的HTML代码约有7％与classes相关 - 其他人有大约20％的HTML代码与classes相关。

问题3：这些模式是否有技术解释（例如Facebook和Stackoverflow使用相同的框架生成CSS）？

Answer 1

您的前端开发人员正在做什么称为面向对象的css（OOCSS），有人认为这可能有利于您网站的速度。

我不想在这里重新讨论OOCSS的论点，所以请阅读这个FAQ：

https://github.com/stubbornella/oocss/wiki/faq

编辑：在编码标准方面，我宁愿在facebook / stack方面犯错，而不是amazon / ebay。请注意，更先进的网站（fb / stack）似乎有更高的类百分比？

Answer 2

我是企业网络软件项目的前端开发人员，大约有50人编写代码，其中大多数是后端代码。最初我同意尽可能少的类来使代码更轻，在css中使用大量的继承。所以我们一直在使用“尽可能少的课程”方法。

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

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

这种事情每周发生3到4次。 较少的课程=较少的灵活性+具有极高特异性的丑陋样式表，是我从中获取的。

A2 ：随着网页上发生javascript的数量，现在使用的课程数量几乎无关紧要。它对我所知道的DOM操作速度没有任何影响。所以我们已经失去了从少数班级方法中获得的任何优势。

参考你的测试，记住，下载css和解析css不是一回事。

此外，上述css修正案实际上使后端和前端开发人员的事情变得更慢。因为我们尝试使用尽可能少的类来使后端变得更容易，所以如果你把它们放在新的上下文中，后端会留下像婴儿一样哭的组件，并且前端必须改变6个月前写的css。我个人浪费了几个星期。

我会说它让工作变得更慢，并且没有值得谈论的性能优势。

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

如果你想从我们的错误中吸取教训，请听听你的前端人员。 您的后端人员会更快乐，因为组件将始终按照他们期望的方式运行。你的前端人员会更快乐，因为他们能够编写健壮，即发即弃的css，每次弹出它们时都不必为新的用例重新进行操作。你的html会更大一些，但说实话，差异是可以忽略不计的，我不认为它会导致任何重大的瓶颈。你的CSS会跑得更快。工作最终将花费更少的时间。

Answer 3

我最近看到谷歌的一篇文章显然鼓励采用oocss方法，但它几乎肯定会产生更大的html和css，这对大型网站来说真的很重要。

我从未见过使用oocss的开发人员，这会让我建议，如果该网站正在被其他开发人员处理，或者很可能在未来，那么采用更多开发人员的方法可能会更好遵循

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

3 个答案: