15 верных путей чтобы сломать ваш CSS

Вольное изложение статьи 15 surefire ways to break your CSS. Автор Rob Glazebrook. Курсивом мои дополнения.

Пропущена точка с запятой
CSS правила состоят из пар описаний — свойство-значение, разделённых между собой точкой с запятой. В соответствии с спецификацией CSS последнее описание может не заканчиваться точкой с запятой, т.к. фигурная скобка и так отделяет всё правило от остальных как стена.
Например:
body {background-color: #444;color: #eee }


Проблема только состоит в том, что если вы решите добавить в правило другое описание, вы можете запросто забыть поставить в последнем описании точку с запятой:
body {background-color: #444;color: #eeefont-family: Helvetica, Arial, sans-serif }


В результате описание font-family никогда не сработает, т.к. парсер будет считать «font-family» частью значения свойства color. Я проставляю последнюю точку с запятой всегда — это как-то добавляет организованности в код. А несколько лишних байт в размере css-файла не играют большой роли, особенно при включенном кешировании браузера.


Пропущено двоеточие
Обычно такая ошибка возникает если люди тренируются в скорости печати на клавиатуре, а не в написании CSS кода. Такую ошибку очень трудно увидеть, т.к. она находится в середине строки. Сравните эти две строки:
body { font-family Helvetica, Arial, sans-serif; }body { font-family: Helvetica, Arial, sans-serif; }



Пропущена фигурная скобка
{Фигурные скобки} вокруг CSS правила — это как жизненный цикл — постоянный, естественный и ожидаемый. И если вы пропустите фигурную скобку (обычно закрывающую, по любой причине) — это всё равно что у вас есть мумия, которая отказывается умирать (да автор я смотрю шут и весельчак) — вы получите хаос.

Когда ничего не подозревающий браузер дойдёт до разбора этой пары правил:
body {font-family: Helvetica, Arial, sans-serif;#wrap {width: 960px; }


он просто подавится. Две открывающих фигурных скобки и только одна закрывающая: всё от #wrap (в данном примере) будет проигнорировано. Как видно — парсер подсветки кода тоже не справился с заданием.

Исправить такую ошибку очень легко — просто проверяете чтобы перед каждым новым правилом стояла закрывающая фигурная скобка. Как уже отмечалась, в основном, забывают проставить именно её.

Опечатки в названии css-свойства
Вообще говоря, я грамотный человек. Однако когда я «в процессе» я набираю текст настолько быстро, насколько с этой задачей справляются мои пальцы, и конечно иногда ошибаюсь. При обычном общении ошибки не очень важны — люди почти всегда могут определить что именно я хотел сказать. К сожалению компьютер более прихотлив.
div { border-bototm: 5px; }

Проще всего такие ошибки отслеживать в редакторах, которые умеют подсвечивать код (офигенное открытие и совет :) ). Например Notepad++ или Adobe Dreamweaver. Если свойство не подсвечено — значит в нём синтаксическая ошибка.

Опечатки в значениях
Опечатки встречаются не только в названиях свойств. Иногда они бывают и при написании значений и их бывает сложнее выловить:
#wrap { padding: 10px 20pz 25px 20px; }


Как видно опечатка в размерности — вместо px стоит pz. Из-за этого всё правило не работает.

Опечатки в названиях классов или ID
Неважно как часто я создавал div с ID «navigation» — я до сих пор нахожу такие правила у себя в коде:
#navigaiton { float: left; } 


Эту досадную ошибку очень сложно выловить, т.к. здесь не поможет даже подсветка кода в редакторах.
Чтобы избежать таких ошибок — я очень редко набираю имена классов или идентификаторы при редактировании css-файлов вручную. Ctrl+c из html и ctrl+v в css.

Неправильный порядок значений
Некоторые CSS свойства являются комплексными, т.е. можно написать значения нескольких свойств через пробел в одну строку. К сожалению большинство таких свойств очень требовательны к порядку значенией:
div { font: 2em Helvetica, Arial, sans-serif; }a { font: "Times New Roman", serif 1.5em; }


Первое правило — корректное и текст всех div-ов получит специфическое начертание и размер. Второе правило — некорректное, т.к. порядок свойств не соблюдён.
О правильном порядке значений в таких свойствах можно прочитать в спецификации CSS. Я кстати всегда путаю этот порядок, поэтому такие свойства обычно тоже пишу копи-пастом, т.е. откуда-то копирую

Размерные величины без указания единицы измерения
Все измеряемые свойства должны иметь значения, с указанием единицы измерения:
#wrap { margin: 3; }


Три чего? Ems? Дюймов? Пикселей?
Про единицы измерения так же можно посмотреть в спецификации CSS.

Дублирующие правила
В больших сss-файлах встречаются полностью правила одних и тех же элементов. Работает всегда последнее — потом не удивляйтесь почему отступ не 2em, а 10px;
ul li { margin: 0 2em;... много кода ...ul li { margin: 0; padding: 10px; }



Конкурирующие правила
Подобная проблема может возникнуть когда вы её совсем не ожидаете. Например, если есть следующий XHTML:
<div id="navigation" class="nav">...</div>


Можно сослаться на этот элемент по имени класс или по id. Проблема возникает, если ссылаются и по классу и по id:
.nav { width: 50%; }... много кода ...#navigation { width: 500px; }


Работает последнее подходящее правило, как и в предыдущем пункте.

Обращаемся к классу как к ID (или наоборот)
Это пожалуй самая частая моя ошибка — каждый раз путаю — поставить точку или решётку :):
.navigation {float: left;width: 100%;height: 4em; }


И ничего не происходит, т.к. элемент имеет id = navigation, а не класс.

Использование несуществующих свойств
Не все CSS-свойства названы интуитивно понятно. Например:
body { text-size: 3em; }


Проблема в том, что хотя свойство вроде и должно принадлежать к текстовым свойствам, используется font-size. Тут конечно опять должны помочь редакторы кода с возможностью подсветки.

Использование несуществующих значений
Ошибка похожая на предыдущую:
td { vertical-align: center; }


Чтобы избежать таких ошибок внимательно изучаем спецификацию.

Неправильное соответствие свойства и значения
Данное CSS определение может показаться корректным даже для тренированного глаза:
a { text-transform: italic; }


Однако видим что правильному свойству неправильно присвоено правильное значение.

Не закрытый комментарий
Вот что не не нравится в css — так это отсутствие однострочных комментариев.
Можете найти отличия в этих двух описаниях?
/* Navigation goes here. */#nav {float: left;width: 100%;height: 3em; }/* Navigation goes here. /*#nav {float: left;width: 100%;height: 3em; }


Единственное отличие в том, что во втором правиле закрывающие символы комментария: /* вместо */. Соответсвенно всё второе правило будет закомментировано.

От себя ещё добавлю:
Есть ещё ошибки, связанные с непониманием короткого написания комплексных свойств margin, padding.
Вот примеры правильного написания:
div#mark {margin: 0;margin: 0 10px;margin: 0 10px 6px;margin: 8px 12px 10px 8px;}

Так вот — общий формат значений данного свойства таков:
margin: [top] [right] [bottom] [left];если указаны не все значения, то действуют следующие правилаmargin: [top]                  = margin: [top] [top] [top] [top];margin: [top] [right]          = margin: [top] [right] [top] [right];margin: [top] [right] [bottom] = margin: [top] [right] [bottom] [right];


т.е. предыдущий пример идентичен
div#mark {margin: 0 0 0 0;margin: 0 10px 0 10px;margin: 0 10px 6px 10px;margin: 8px 12px 10px 8px;}



К нулю единицу измерения указывать необязательно, оно и логично — не всё-ли равно ноль единиц чего?

Спасибо за внимание. Читайте документацию :)


Источник: Уроки CSS на Хабрахабре


Полезные комментарии с хабрахабры:
seraph 27 марта 2009
Выдержка из книги Эрика Мейнра «CSS каскадные таблицы стилей. Полное руководство»:
Специфичность селектора определяется компонентами самого селектора. Значение специфичности состоит из четырёх частей: 0, 0, 0, 0. Реальная специфичность селектора определяется следующим образом:

— Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 0, 1, 0, 0.

— Для каждого указанного в селекторе имени класса, псевдокласса или атрибута к специфичности добавляется 0, 0, 1, 0.

— Для каждого заданного в селекторе элемента и псевдоэлемента к специфичности добавляется 0, 0, 0, 1. Внутренне противоречие CSS2 состояло в том, что не было определено, обладают ли псевдоэлементы какой-либо специфичностью, но в CSS2.1 их специфичность явно определена и учитывается данным правилом.

— Комбинаторы и универсальный селектор не учитываются.



…первый нуль зарезервирован для встроенных объявлений стилей, специфичность которых превосходит специфичность всех остальных объявлений.



Steward
27 марта 2009
что кого разруливает… никто ничего не разруливает…
просто есть рекомендация как высчитывать стили и приоритеты (по увеличени приоритетности)
1. встроенный стиль браузера (самый низкий приоритет)
2. внешний css-файл
3. внутренний стиль
4. инлайн-стиль, т.е. стиль прописанный в аттрибуте style в самом html-элементе (самый высокий приоритет)