Распространенные ошибки CSS при разработке сайта
Если говорить начистоту, то из всех веб-языков CSS самый простой. Я говорю буквально, что может быть проще списка свойств, влияющих на элемент? А синтаксис - почти как письменный английский. Хотите изменить размер шрифта? На это есть свойство font-size. Как насчет цвета? Воспользуйтесь свойством color.
Однако, несмотря на такую внешнюю, обманчивую простоту, CSS - довольно сложная система, особенно когда с ней работают на профессиональном, высокоэффективном уровне. Одно количество способов выбора элемента чего стоит, не забудем и о многообразии свойств, которые можно применить к выбранному набору элементов, и том, как меняется вид сайта, когда речь идет о различных браузерах и их движках.
Ошибки при работе c CSS нередки. Вот самые распространенные ошибки, которые мы все иногда совершаем.
Не используем CSS Reset
Веб-браузеры – наши ветреные друзья. Их несовместимость может любого разработчика вывести из себя. Хотя, в конечном счете, именно браузеры отображают наш веб-сайт, поэтому следует сделать все (что в наших силах), чтобы удовлетворить их запросы.
Одним из самых глупых свойств веб-браузеров является предоставления дизайна по умолчанию HTML-элементам. Полагаю, это не их вина: что если веб-мастер решит не разрабатывать дизайн для своих веб-страниц? Отсюда и необходимость в альтернативном варианте для тех, кто не решится использовать CSS.
В любом случае, едва ли найдутся два браузера предоставляющие элементам одинаковый дизайн по умолчанию, поэтому единственным способом убедиться в эффективности своего стиля является использование стороннего сброса стилей (CSS Reset). Например,
CSS reset - это установка базового значения для всех основных свойств, затем эти базовые объявления прописываются ко всем основным тегам. Красота заключается в слудующем: как только вы эффективно подключите CSS Reset, у вас появится возможность стилизировать все элементы вашей страницы, не обращая внимания на то, какие свойства назначены элементам по умолчанию.
Существует множество баз с CSS Reset. Я лично использую модифицированную версию популярного сброса от Эрика Мейера (Сброс стилей от Эрика Мейера) или модифицированную версию YUI Reset CSS. Также вы можете создать свой собственный CSS Reset (сброс стилей).
Большинство из нас применяют простой и универсальный селектор (*) для сброса margin/padding (полей/отступов).
CSS
* { margin:0; padding:0; }
Несмотря на его работоспособность, это еще не полный сброс. Необходимо также сбросить, например, границы (border), подчеркивающие линии (text-decoration), цвет у элементов списка, ссылок и таблиц, чтобы в будущем не было противоречий между браузерами.
Чрезмерная конкретизация селекторов
Практика чрезмерной конкретизации при выборе элементов не самый удачный подход. Этот селектор наглядный пример моих слов:
CSS
ul#navigation li a { ... }
Обычно структура навигации по сайту состоит из <ul> (Id, как правило, равен #nav или #navigation), затем внутри него идут несколько элементов списка (<li>), внутри каждого из которых имеется свой собственный тег <a> для связи с другими страницами. HTML структура безупречна, однако CSS селектор вызывает у меня некоторое беспокойство.
Прежде всего: нет нужды в ul перед #navigation, так как Id сам по себе специфичный селектор. Кроме того, в синтаксисе селектора можно не писать li, потому что все внутренние элементы навигации (a) расположены в элементах списка (#navigation) и поэтому в данном уточнении необходимости нет.
Таким образом, сокращенный селектор будет выглядеть так:
CSS
#navigation a { ... }
Данный пример сильно упрощен, так у вас могли бы быть вложенные списки, для которых вы хотели бы задать свои стили (например: #navigation li a и #navigation li ul li a совсем не одно и тоже). Однако, если это не так, то в чрезмерной спецификации необходимости нет.
Также мне хотелось бы поговорить о необходимости идентификатора (Id) в нашей ситуации. Предположим, что наш список навигации расположен внутри «шапки» div#header. Также предположим, что внутри #header всего один неупорядоченный список (для навигации). В таком случае мы можем убрать Id из неупорядоченного списка нашей HTML разметки, а затем выбрать его в CSS следующим образом:
CSS
#header ul a { ... } Этим примером мне хотелось показать следующее: всегда по минимуму конкретизируйте ваши CSS селекторы (без ущерба работоспособности, конечно). Включение дополнительной мишуры возможно и создаст иллюзию безопасности и точности, однако, когда речь заходит о селекторах, есть только два уровня конкретики (специфичности): конкретный и недостаточно конкретный.
Не используем сокращения
Взгляните на следующий список свойств:
CSS
#selector {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0; } Что с ним не так? Надеюсь, у вас в голове уже зазвенел колокольчик тревоги, когда вы заметили все эти повторения.
К счастью эту проблему можно решить с помощью сокращенного варианта - свойства margin. Следующий список дает тот же результат, что и упомянутый выше, однако в коде на три строчки меньше.
CSS
#selector {
: 50px 0;
} Ниже приведен список свойств для свойства font:
CSS
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;Его можно ужать до одной строчки кода:
CSS
font: bold 14px/1.5 Helvetica; Этот метод можно применить и к свойствам фона. Следующий:
CSS
background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top; Может быть отображен в CSS как:
CSS
background: url(background.png) repeat-y center top; Использование сокращений в CSS облегчит поддержку кода.
Используем 0рх вместо 0
Скажем, вы хотите добавить элементу нижнее поле в 20рх . Вы, возможно, захотите использовать следующее правило:
CSS
#selector { margin: 20px 0px 20px 0px; } Не стоит. Это излишне. Не нужно писать рх после 0. Это может показаться придиркой, однако, когда работа идет о большом файле, удаление всех этих ненужных рх поможет сократить его размер (что никогда не бывает лишним).
5. Используем имена цветов вместо Hexademical
Описывать цветовые значения посредством имен: red вместо #FF0000 – удел ленивого программиста.
CSS
color: red; Здесь мы говорим браузеру о том, как следует отобразить,например, текст, причем ориентироваться он будет на свое мнение. Если мы хоть чему-то и научились от попыток заставить работать корректно сайты во всех браузерах и от накопленных часов разочарования из-за дурацких нестыковок – так это никогда не позволять решать браузеру за нас, как отображать наш сайт.
Вместо этого следует приложить усилия и найти фактическое hex значение для нужного нам цвета. Сделая это, вы будете уверены, что во всех браузерах отображается один и тот же цвет. Для этого можно использовать специальные инструменты (для браузера firefox - дополнение ColorZilla), который предоставляет превью и hex значения для цвета.
Это может показаться незначительным, однако, когда речь идет о CSS, именно мелочи зачастую служат причиной различных глюков.
6. Ненужные селекторы
Процесс написания стилей я начинаю с типографической разметки текста, затем работаю над структурой и, наконец, перехожу к редактированию цвета и фона. Так мне удобно. Так как я не фокусирую внимание на каждом элементе, я часто нахожу себя печатающим излишние объявления, правила.
По завершении работы я всегда проверяю себя на случай повторения мною селекторов, и если таковые есть, объединяю их. Во время разработки такая ошибка несущественна, однако не забывайте устранять их на стадии производства.
Комментарии к статье