Советы по CSS для начинающих
Всем привет!
Сегодня мы решили написать несколько, на наш взгляд, полезных советов для начинающего верстальщика. Пока что эти советы будут только относительно CSS, возможно чуть позже мы сделаем что-то похожее и по HTML.
Мне кажется, что эти советы будут полезны не только начинающим, но и тем, кто уже давно работает с CSS. Ведь нет предела совершенству ;-)
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 в браузере
Они сделают вашу жизнь проще, а работу быстрее. Кстати, вот отличная подборка инструментов для веб-разработчиков.
Надеюсь, что начинающим (или даже уже опытным) верстальщикам эти скромные советы будут полезны и, надеюсь, что после прочтения вы станете писать хоты бы чуть-чуть, но все-таки более правильный код.
Если у вас есть что дополнить, пишите в комментариях.
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 18
RSSКстати говоря, может быть это только у меня так: в IE7 верстка этого сайта разлетается.
вскоре все будет конфеткой.)
Перемены - это к лучшему.
Так воот! Я хочу попросить тебя, автор блога, написать статью, как самим сделать красивенькие message-boxes, типа таких http://www.extjs.com/deploy/dev/examples/message-box/msg-box.html
Именно интересует css+html. У меня жутко плохо с версткой и дизайном, програмлю я более-менее.
message-boxes и вообще что либо подобное нельзя сделать только на css+html. На то он и Ext[JS] что написан на яваскрипте.
И авторов у блога не один =) (Слава богу ато когда один - посты редкие и однотипные).
Он поможет быстро освоить CSS на практике. Заодно научитесь пользоваться лучшим CSS-редактором TopStyle.