1. Используйте глобальные сбросы

Помните, мы уже как-то писали по глобальные сбросы в CSS? Думаю, вы знаете, что все браузеры имеют несколько разные значения по умолчанию для отображения элементов. Глобальные сбросы как раз борются с этим.

2. Различайте id и class у элементов

Аттирибут id указывает на то, что такой элемент всего один, он уникален (скажем, у вас всегда всего одна шапка на странице). Класс же объединяет несколько элементов со схожими стилевыми и симантическими свойствами. Советую так же прочитать нашу статью про семантику.

3. Используйте короткие свойства

Да, про короткие свойства в CSS я уже как-то говорил. Использование коротких свойств намного удобнее, кроме того, этим вы можете уменьшить размер ваших файлов стилей.

4. Организуйте свои CSS файлы

Помимо разделения файлов (как, например, в прогрессивном улучшении CSS), вы так же можете ставить комментарии непосредственно внутри файлов. Это делает ваш код более читабельным и его проще редактировать.

5. Используйте CSS фреймворки и тулбоксы

Это поможет сэкономить ваше время. Вы можете использовать как готовый фреймворк (дополнив или изменив его), так и написать свой. То же относится и к тулбоксам. Не забудьте посмотреть нашу подборку CSS фреймворков.

6. Избегайте избыточности

Все вы знаете, что тег td (tbody/thead/tr) по правилам HTML возможен только внутри тега table. Тоже относится к li и ul. Так что вместо:

table td { ... }   ul li { ... }

можно свободно писать:

td { ... }   li { ... }

Это, конечно, самый простой случай, но, думаю, идею вы поняли ;-)

7. Не увлекайтесь !important

Этот «флаг» повышает приоритет описываемого свойства, то есть если дальше будет противоречие, то свойство с !important будет важнее.

Некоторые молодые верстальщики злоупотребляют !important, хотя его всегда можно заменить более строгим наследованием. Ах да, он еще не всегда корректно работает в ослике.

8. Различайте медиатипы

Медиатипы при подключении CSS файлов позволяют вам управлять внешним видом вашего сайта на разных устойствах вывода (монитор, принтер, мобильник и т.д.). Использование медиатипов переплетается с разделением файлов, их использование сделать ваш сайт более доступным для разных платформ.

9. Указывайте несколько шрифтов

Далеко не все шрифты присутствуют во всех системах и платформах, поэтому при объявлении семейства шрифтов необходимо указывать алтернативные шрифты. Скажем, у нас на сайте сначала используется Вердана, а потом Женева и Ариал:

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

Между прочим, большинство профессиональных редакторов CSS имеет вот такие встроенные наборы семейств шрифтов. Так что хватит уже верстать в блокноте ;-)

10. Используйте инструменты для проверки CSS в браузере

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

Надеюсь, что начинающим (или даже уже опытным) верстальщикам эти скромные советы будут полезны и, надеюсь, что после прочтения вы станете писать хоты бы чуть-чуть, но все-таки более правильный код.

Если у вас есть что дополнить, пишите в комментариях.