Пятница, 19 Октября 2012 09:01

Эффективность CSS селекторов

Written by 
Оцени эту запись
(2 Голоса)

Селектор в CSS стилях позволяют применять заданные стили только к одному или к нескольким элементам. Выбирать элементы можно по идентификатору, по классу, по тегу, по атрибутам. Также мы можем выбирать все абзацы p, которые лежат в блоке div с классом .content:

 

div.content p {

...

}

 

Можно также прописать и более сложную структуру выбора элементов:

 

ul#menu li a span {...}

 

Это значит, что в элементе ul с id="menu" находим все li, а внутри каждого ссылку a, внутри которой сидит span, которому эти стили и предназначены. Но хдесь есть одно "но". Браузер, читая css файл выберет те же span'ы инече. Браузер читает ту же строку, но справа налево. То есть, он находит все span'ы на странице, потом смотрит какие из них прописаны внутри a, а из тех выбирает все, кто внутри li и т.д. Потому, при таком указании селекторов, браузер выполняет много лишних действий.

 

Для того, чтобы разобраться в эффективности использования определенных типов селекторов, приведу рейтинг css селекторов:

 

  • идентификатор (#id)
  • класс (.class)
  • тег (p, div)
  • дочерние и сестринские элементы (li+li, ul>li)
  • потомки (ul li)
  • универсальный селектор (*)
  • атрибут (input[type="text"])
  • псевдоклассы и псевдоэлементы (a:hover)

 

Рекомендации по оптимизации

 

1. Не используйте теги вместе с классами и идентификаторами, а также классы и идентификаторы вместе

 

ul#menu или .menu#first

 

2. Избегайте лишних селекторов

 

ul li a span можно записать, как ul span

 

Рекомендации по разработке страницы и упрощении стилей

 

1. Не используйте лишние элементы, если без них можно обойтись, не прописывайте лишние теги.

 

2. Используйте разнообразные теги i, b, em, а не только div и p. Тогда для однообразных целей можно использовать одни теги и задавать им стили однократно.

 

3. В сбросе стилей, типа reset.css, используйте только те теги, которые стречаются на странице. Все лишнее удаляйте.

 

4. Исбегайте неиспользуемых стилей.

 

5. Испольжзуйте короткие записи стилей:

 

#336699 == #369

margin-top: 5px; margin-bottom: 10px; margin-right: 15px; margin-left: 20px; == margin: 5px 15px 10px 20px;

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов