* (звездочка)

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

A + B

Этот селектор называется смежным и выбирает тот элемент, который следует сразу за первым. Если нужно выбрать первый div после верхнего колонтитула, то можно написать:

A[href*="example"]

Это – действительно классный селектор, когда нужно немного по-иному назначить стили отдельной ссылке; то, что находится в кавычках, будет сопоставлено с href ссылки.
Есть еще версия без *, которая сопоставляет точный url, который можно использовать для точных ссылок.

A:nth-child(n)

Селектор nth-child – простой способ выбрать любой дочерний элемент по порядку. Если, к примеру, вам нужен третий элемент неупорядоченного списка, результат получится такой.

Можно применять nth-child для выбора каждого множителя числа, используя переменную n , например, если вставить 3n, он выберет номер элемента списка 3, 6, 9, 12 и так далее.

A:nth-last-child(n)

Селектор nth-last-child работает как nth-child, но вместо того, чтобы начать отсчет с первого элемента списка, он начинает считать с последнего, поэтому если вы примените его с числом два, он выберет тот элемент списка, который идет перед последним, и будет применяться как селектор nth-child.

A:nth-of-type(n)

Этот селектор делает следующее: смотрит, элемент какого вида вы поместили в него и выбирает, например, третий элемент на вашей странице, соответствующий тому, что вы написали. Для выбора третьего абзаца в div’е можно применить (см. фотку)

A:visited

Когда-нибудь обращали внимание на то, что при поиске чего-либо в google уже просмотренные вами страницы становятся другого цвета? Именно это делает селектор visited. Он – отличное дополнение для пользователей, но иногда о нем забывают и, судя по моему опыту, он очень удобен при поиске в google.

Классический CSS Clearfix

Данный код clearfix годами вращался в Сети в среде самых находчивых веб-разработчиков. Вам требуется применить этот класс к контейнеру, содержащему «плавающие» элементы. Так гарантируется, что любой последующий контент не станет свободно перемещаться, а будет помещен в стек и сброшен.

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}

🗿 Шаблон CSS Blockquote
Блочные цитаты на своем вебсайте нужны не каждому. Но я полагаю, что они – великолепный элемент HTML для выделения цитат или повторяющегося содержимого внутри блогов или веб-страниц. Этот базовый отрывок CSS предлагает блочным цитатам стиль по умолчанию, и они, таким образом, не кажутся тусклыми и примитивными.

Код выше!

🗿 W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

• не закрыт тег;
• не рекомендованные символы в ссылках;
• используется не рекомендованный тег;
• не указан обязательный атрибут;
• и другое.

Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.

Если кто не задумывался, то файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие)

👻 Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.

Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

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

👻 Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em»

Использование классов вместо id

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.
Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

Если надо присвоить к селекторам и классам одинаковые свойства, то можно просто разделить селекторы запятыми в одну строку