Влияние OOCSS на производительность веб-сайта - более короткий CSS, но громоздкий HTML с большим количеством классов

Очевидно, у этого нет никакого осмысленного ответа - каково определение слова «быстро»? Сколько байтов - это слишком?

Короткий ответ заключается в том, что если вы gzip-архивируете свой html, правильно кешируете вещи и делаете разумное повторное использование вещей, то это не имеет никакого значения.

Если вы беспокоитесь о добавлении дополнительных классов CSS, удалите все свои </li> и т. Д., А также свои </body> и </html>. Кроме того, для любых атрибутов, которые представляют собой отдельные слова и не содержат каких-либо проблемных символов, отбросьте окружающий их ". Эти изменения должны уравновесить добавление классов.

(В случае, если это прозвучало немного язвительно, я бы рекомендовал сделать это на вашем уровне кеширования - что-то вроде этого выполнит свою работу:

$page_content = str_replace(array("</option>","</td>","</tr>","</th>","</dt>","</dd>","</li>","</body>","</html>"),"",$page_content);       
$page_content = preg_replace('/(href|src|id|class|name|type|rel|sizes|lang|title|itemtype|itemprop)=(\"|\')([^\"\'\`=<>\s]+)(\"|\')/i', '$1=$3', $page_content);                
$page_content = preg_replace('!\s+!', ' ', $page_content);

Находятся

Прирост производительности от "более короткого CSS" двоякий:

1. Меньшая таблица стилей
2. Более короткие селекторы

Селектор long css неэффективен. Стив Содерс (среди прочих) много писал о Производительность CSS-селектора. Более эффективные селекторы, вероятно, более чем компенсируют несколько лишних байтов для нескольких классов.

Использование метаязыка CSS, например LESS или Sass, особенно. если вы используете @extend или mixins дает вам лучшее из всех миров.