私はウェブサイトのIT側全体（インフラストラクチャと開発の両方）を監督する責任があり、主要なフロントエンド開発者と意見の相違があります。彼のアプローチは、それぞれが1つの機能をもたらす個々のクラスを作成し、要素のスタイルを設定するために必要な数のクラスを組み合わせることです。
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を作成する必要はありません。
-メンテナンスのしやすさ：上記と同じ理由。
-移植性：どのWebサイトでも同じアプローチを使用できます（彼はさまざまなプロジェクトに取り組んでいる請負業者であるため、これは彼にとって理にかなっています）。
-小さいCSS：レイアウトが特定のクリティカルサイズに達し、同じクラスが何度も再利用されている限り（これは適切なレイアウトの場合ですが、例が簡潔であるため、上記には明らかに反映されていません）。
短所：
-より大きなHTML。
-CSSの部分に興味がない場合はHTMLが読みにくくなります（ビューを作成する私のバックエンド開発者は興味がありません）。
-クラスセレクターに基づいて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コードを使用することは、Webサイトの成長を実現するために重要であると感じています。ページの
読み込みが速くなり、SEOとユーザーエクスペリエンスに役立ちます。
-同じ帯域幅でより多くのページを提供できるため、インフラストラクチャのコストを節約できます。
事実上の回答を得るために、「大きな」Webサイトをスキャンして、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%
これまで「my」アプローチを使用してきましたが、クラスのid and属性に関連するコードの割合が他の大きなWebサイトと同じ割合（それぞれ約2％と7％）に保たれていることを嬉しく思います。それでも、その選択を検証するために、経験豊富な開発者/ウェブマスターが答えられることを願って、次の質問をしたいと思います。
Q1：2つのアプローチのいずれかに賛成/反対する他の賛否両論がありますか？
Q2：あなたの経験から、軽量のHTMLコードを使用することを心配することは重要ですか、それとも圧縮やその他の基準を使用すると無視できるようになりますか（たとえば、フロントエンド開発者との戦いにより多くのお金を費やします）？
結果を見ると、属性idとclass属性に関連するコードの量にパターンがあるように見えることがわかります（ただし、より多くのWebサイトをスキャンすると、より正確な画像が得られることはわかっています）：-すべての
Webサイトの画像は約1％から2です。id属性に関連するHTMLコードの％ 。
-4つのWebサイトには、HTMLコードの約7％がに関連していclassesます。
-他の人は、HTMLコードの約20％がに関連していclassesます。
Q3：これらのパターンの技術的な説明（たとえば、FacebookとStackoverflowが同じフレームワークを使用してCSSを生成している）はありますか？