Вопросы Теги

Легко поддерживать 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%; }

Плюсы:

-понимание CSS через HTML:вы можете понять, что делает CSS, просто глядя на имена классов в HTML.
-простота создания:после того, как вы определили свой набор классов, это просто вопрос их объединения в 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 выделена для использования идентификаторов и классов. Вот код:

<?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 :Видите ли вы другие плюсы/минусы в пользу/против любого из двух вариантов? подходит?

Q2 :Исходя из вашего опыта, так ли важно беспокоиться о легком коде HTML, или этим можно пренебречь при использовании сжатия и других критериев (, например. вы потратите больше денег на борьбу с вашими разработчиками внешнего интерфейса )?

Глядя на результаты, вы увидите, что объем кода, относящегося к атрибутам idи class, (имеет определенную закономерность, хотя я знаю, что сканирование большего количества веб-сайтов даст более точную картину.):
-Все веб-сайты имеют от 1% до 2% своего HTML-кода, связанного с атрибутами id.
-На 4 веб-сайтах около 7% HTML-кода связано с classes.
- остальные имеют около 20% своего HTML-кода, связанного с classes.

Q3 :Есть ли техническое объяснение (, например. Используют ли Facebook и Stackoverflow одни и те же фреймворки для создания своего CSS )для этих шаблонов?

5
задан Max 2 May 2012 в 10:03
поделиться