В процессе написания CSS следует придерживаться некоторых принципов,
которые позволяют сократить код CSS, сделать его более удобным,
наглядным и читабельным. Читабельность в данном случае означает, что
разработчик спустя какое-то время может легко понять и модифицировать
стиль или что в коде разберется даже сторонний человек.
Периодически поднимается спор о целесообразности использования
идентификаторов в вёрстке. Основной довод состоит в том, что
идентификаторы предназначены для доступа и управления элементами
веб-страницы с помощью скриптов, а для изменения стилей элементов
должны применяться исключительно классы. В действительности нет
разницы, через что задавать стили, но следует помнить о некоторых
особенностях идентификаторов и классов, а также подводных камнях,
которые могут поджидать разработчиков.
Валидацией называется проверка CSS-кода на соответствие спецификации
CSS2.1 или CSS3. Соответственно, корректный код, не содержащий
ошибок, называется валидный, а не удовлетворяющий спецификации —
невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/,
с помощью этого сервиса можно указать адрес документа, загрузить файл
или проверить набранный текст. Большим плюсом сервиса является
поддержка русского и украинского языка.
Аббревиатура CSS расшифровывается как Cascading Style Sheets
(каскадные таблицы стилей), где одним из ключевых слов выступает
«каскад». Под каскадом в данном случае понимается одновременное
применение разных стилевых правил к элементам документа — с помощью
подключения нескольких стилевых файлов, наследования свойств и других
методов. Чтобы в подобной ситуации браузер понимал, какое в итоге
правило применять к элементу, и не возникало конфликтов в поведении
разных браузеров, введены определенные приоритеты.
Наследованием называется перенос правил форматирования для элементов, находящихся
внутри других. Такие элементы являются дочерними, и они наследуют некоторые
стилевые свойства своих родителей, внутри которых располагаются.
При создании стиля для сайта, когда одновременно используется множество селекторов,
возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни
и те же элементы, их можно сгруппировать для удобства представления и сокращения
кода.
Псевдоэлементы позволяют задать стиль элементов не определенных в
дереве элементов документа, а также генерировать содержимое, которого
нет
в исходном коде текста.
Псевдоклассы определяют динамическое состояние элементов, которое изменяется
со временем или с помощью действий пользователя, а также положение в дереве
документа. Примером такого состояния служит текстовая ссылка, которая меняет
свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов
браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить
разные динамические эффекты на странице.
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы,
например, задать шрифт или начертание текста. В этом случае поможет универсальный
селектор, который соответствует любому элементу веб-страницы.
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение атрибута type. При этом добавление правил стиля к селектору INPUT
применит стиль одновременно ко всем созданным с помощью этого тега
элементам. Чтобы гибко управлять стилем подобных элементов, в CSS
введены селекторы атрибутов. Они позволяют установить стиль по
присутствию определенного атрибута тега или его значения.