Что такое более быстрый / эффективный стиль CSS

Question

Мне было любопытно, какой метод стилевого оформления CSS быстрее (с точки зрения рендеринга), а затем просто с точки зрения лучших практик, какой метод имеет больше смысла (я бы сказал, довольно субъективно?).

Я могу создавать базовые классы, такие как:

.rounded-corners-5 { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
 }

OR

Я могу использовать другой метод применения стилей к нескольким идентификаторам / классам:

#box1, #header, #container, .titles { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
}

Answer 1

Я согласен с tster: первый означает ввод визуальной команды в HTML (всегда остерегайтесь классов с именами, которые описывают их внешний вид, а не их назначение). Если оно имеет логическое назначение (например, раздел), то оно может быть чище. В противном случае я бы использовал вторую версию.

То, от чего вы действительно страдаете, это отсутствие абстракции в CSS, что означает, что вы склонны страдать от дублирования и / или нечетных группировок, чтобы избежать дублирования. Возможно, вы захотите посмотреть эту статью о Sass . Общая идея заключается в том, что вы пишете документ Sass (который не совсем CSS, но похож), который затем компилируется в документ CSS, который вы затем развертываете.

Answer 2

Что касается стиля, напишите свой HTML, чтобы он был только функцией, и напишите CSS, чтобы добавить форму. Поэтому для идентификаторов они должны идентифицировать элемент. Идя в другом направлении, по существу, записывая стиль в HTML, например. .blue{color:blue}, который просто загромождает ваш HTML классами. Цель CSS - дать вам возможность поменять таблицы CSS и полностью контролировать внешний вид.

Answer 3

Не думаю, что синтаксис так важен для скорости.

Производительность больше зависит от того, когда браузер должен перерисовывать.Что происходит в событиях типа :hover или при внесении изменений в DOM.Перекраска для элементов, расположенных absolute или fixed, будет самой быстрой, поскольку перерисовывать будет меньше, поскольку они не встроены, поэтому вам не придется перекрашивать элементы окружения.

Вы можете использовать Google Page Speed ​​ надстройка для Firebug для просмотра перерисовок.

Я считаю, что все больше браузеров будут использовать аппаратное ускорение для подобных вещей, что должно значительно ускорить процесс.

Что касается синтаксиса, я бы использовал классы и идентификаторы, которые описывают содержимое или использование элемента (как ваш второй пример).Теперь вам не нужно менять свой HTML, когда вы решите, что все элементы с классом .rounded-corners-5 должны иметь border-radius: 10px.Держите стиль и структуру отдельно.

Answer 4

Я не знаю, какой из них будет отображаться быстрее.Но с точки зрения обслуживания, я бы ненавидел , используя второй вариант, потому что это означало бы, что элемент #header мог бы иметь правила, определенные во многих различных местах в CSS.Я не хотел бы охотиться за ним каждый раз, когда хотел внести изменения.

Answer 5

Я бы всегда использовал второй метод, мне он кажется более логичным.На самом деле я не знаю, будет ли он быстрее отображаться, но точнее в файле, и он хранит все ваши идентифицируемые идентификаторы / классы вместе.

Answer 6

Более эффективным является тот, который занимает меньше места, ускоряет загрузку и ускоряет отображение веб-страницы.

Это также помогает оптимизировать поисковую систему (SEO).

Answer 7

Первый метод работает быстрее, если у вас нет нескольких идентификаторов и классов на одном элементе, потому что тогда вы можете легче запомнить, что делают классы / идентификаторы, когда вы редактируете свой HTML или серверный скрипт. Я не знаю, какой из них рендерит быстрее, и это может быть даже субъективно ко многим вещам, таким как браузер, возраст компьютера и т. Д., Так как я ничего не знаю о внутренностях алгоритмов рендеринга в различные движки рендеринга (не то, чтобы я когда-либо знал о двух из них, которые мы все знаем и ненавидим, не меняя работу ...).