HTML & CSS & JS Telegram Channel Link

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

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

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

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

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

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

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

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

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

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

👻 Спрайты

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

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

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

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

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

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

🗿 W3C Validator

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

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

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

Код выше!

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 Clearfix

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

A:visited

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

A:nth-of-type(n)

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

A:nth-last-child(n)

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

A:nth-child(n)

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

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

A[href*="example"]

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

A + B

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

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

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