Скорость селектора CSS

согласно новой статье из css-tricks существует большая разница между тем, как вы выбираете свои элементы, потому что они выбраны справа налево.

статью можно найти здесь. http://css-tricks.com/efficiently-rendering-css/

Я собираюсь создать страницу, на которой есть разные документы на одной странице:

мой вопрос в том, как я должен идти о HTML для эффективности CSS или наоборот?

<div class="document-type-1">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

<div class="document-type-2">
    <h1>Some heading</h1>
    <p>Some paragraph</p>
</div>

там может быть несколько одного и того же типа документа, поэтому я не могу использовать идентификатор.

.document-type-1 h1 {

}

.document-type-1 p {

}

.document-type-2 h1 {

}

.document-type-2 p {

}

это будет "неэффективно", так как все теги p найдены первыми...

Как бы вы это сделали, если бы это было сделано быстрее, и вы могли бы переместить ту же статью в новый тип документа?

6
css css-selectors

3 ответов

насколько я вижу, если я правильно понимаю статью, самое эффективное способ сделать это - если вы не используете пользовательский идентификатор для каждого элемента - будет:

// YUCK!

<div class="document-type-1">
    <h1 class="document-type-1-h1">Some heading</h1>
    <p class="document-type-1-p">Some paragraph</p>
</div>

.document-type-1-h1 {

}

.document-type-1-p {

}

но это гадость. Это дилемма, что написание совершенно эффективного CSS идет вразрез со всеми правилами написания хороший CSS.

Если нет реальных, фактических проблем скорости рендеринга, вызванных правилами CSS, я бы склонен подчиняться некоторому здравому смыслу правила (например, не быть расточительным с глобальными селекторами > * стиль, не используя "слишком квалифицированные селекторы", такие как form#UserLogin {...}, не используя слишком много правил в целом....), но в остальном сосредоточьтесь на чистом, хорошо структурированном CSS. Как говорится в самой статье:

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

на Google скорость страницы советы связанный с @gulbrandr в своем ответе дать некоторые хорошие реальный совет.

7

рекомендации Google по скорости страницы объясняют, как писать эффективные селекторы CSS: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

6

есть много вещей, которые следует учитывать при оптимизации скорости рендеринга страницы. Селекторы CSS и разметка HTML-это лишь некоторые из них.

вот как это сделать на основе лучших практик, изложенных в статье, которую Вы читаете и другие.

1. Разметка вашего контента

используйте основные элементы html, если вам не нужна дополнительная специфичность.

<h1>Some heading</h1>
<p>Some paragraph</p>

<h1>Some heading</h1>
<p>Some paragraph</p>

<div class="module">
  <h1 class="title">Some heading</h1>
  <p>Some paragraph</p>
</div>

<div class="module featured-module">
  <h1 class="title">Some heading</h1>
  <p class="content">Some paragraph</p>
</div>

2. Стили Базовых Элементов

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

h1             { font-size: 20px }
p              { font-size: 14px }
.title         { font-family: Georgia }
.module        { color: orange }

важно узнать, какие свойства наследуются дочерними элементами стилизуемого элемента. Например, когда color свойство определено для .module class, цвет будет использоваться для всех дочерних элементов (если не существуют более конкретные правила).

3. Переопределение Стилей Базовых Элементов

если у вас есть много <p> теги на страница, и вы хотите только переопределить стили нескольких, а затем дать эти несколько <p> теги класса и использовать класс для целевых стилей для тех немногих <p> теги.

.module .title { color: red }
.featured-module .title { color: blue }

Примечание: если строка селектора соответствует спецификациям и появляется после переопределения правила, то она применяется без необходимости какой-либо дополнительной специфичности.

использование класса позволяет повторно использовать стили для других элементов html-документа. Вы можете также используйте ID в качестве селектора предков для условного применения стилей, но затем вы теряете преимущество скорости ID. ID обычно используется как единственный элемент в строке сектора:

#login-module { color: tan }

если у вас есть много <p> теги, и вы хотите переопределить половину из них (или много разных групп из них), вы должны принять решение либо А. добавить классы к ним, или Б. пожертвовать скоростью страницы (немного?) и используйте потомок селекторы:

.featured-module p { }
.category-module p { }

выполните собственное тестирование, чтобы определить, является ли уменьшение времени рендеринга страницы достаточно значительным, чтобы не использовать это решение. Если это не так много (или незаметно), это решение может упростить ваш код и время разработки.

резюме

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

Примечание: скорость селекторов для JavaScript не такая, как в CSS. Проверьте эти тесты:http://mootools.net/slickspeed/

4