Шесть отборных советов CSS.

14 Апрель, 2010

советы css Проснулся сегодня и думаю…надо сегодня посоветовать что-то. И что ж. Взялся советовать своим читателям правила и принципы CSS. В моей статье всего шесть советов. Но все шесть являются наиболее важными! Советовать в этой области можно очень много и нудно. Но зачем же советовать то, что и самому можно додумать? Я выбрал самые, на мой взгляд, нужные моменты для новичка. Читаем!

1. Используйте сокращения в CSS

Каждый начинающий, неопытный верстальщик хочет что бы его код был как можно больлее объемным(ну согласитесь, все когда-то такими были=) ). Это не правильно. Чем меньше кода в css тем лучше. Ниже я примеду пимер, как можно сократить Ваш написаный код в css.

У вас было:

1
2
3
4
5
6

.name_class {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}

Теперь модифитируем его:

1
2
3

.name_class {
background: #fff url(image.gif) no-repeat top left;
}

2.Избегайте лишних селекторов

Когда Вы устанавливаете правила в CSS старайтесь как можно меньше писать путь к тому элементу, которому Вы хотите задать это правило. Вот к примеру:

1
2
3

ul li { ... }
ol li { ... }
table tr td { ... }

Это все можно сократить, и написать проще:

1 2	li { ... } td { ...}

Просто по логике, да и по правилам, <li> будет существовать только в рамках <ul> или <ol> и <td> будет только внутри <tr> и <table> поэтому не нужно повторно включить их в объявления свойств.

3. Замена текста картинкой

Этот метод часто использовается, когда идет работа с заголовками <h1>…</h1> и так далее.

1
2
3
4
5
6

h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}

Подробнее этот принцип я описывал в статье “Метод замены текста картинкой. Image replacement”

4.Следите за чистотой CSS кода

Бывает, что вы верстаете не один день или проект настолько большой, что Ваш css код просто огромен…в таком случае к концу верстки вы можете просто запутаться в вашем же коде, а это самое большое “поражени”, ведь если вы сами не разбираетесь в своем коде, как в нем сможет разобраться программер или даже, знающий css, заказчик??? Так вот несколько принипов что нужно знать и применять, для того, что бы ваш код был читабельным:

Разбивайте большие CSS на части (header,content,left sidebar, footer);
Незабывайте писать комментарии как можно подробнее;
Используйте сокращенные правила (см. пункт 1!);
Старайтесь структурировать ваш CSS и HTML файлы;

5.Использование display:inline для элементов с float

Элементы со свойством float в IE 6 подвержены известному багу двойного margin, например, вы указываете слева margip: 5px, а в IE 6 получаете 10px. display:inline решит эту проблему, и при этом ваш CSS останется валидным.

6.Избегайте процентных измерений

Для IE6 проценты как прыщ на лбу! Браузер непонимает процентные отступы, они просто “сбивают его с толку”. Для других браузеров можно использивать процентное соотношение установив свойству правило !important, а для IE6 отдельно прописать тоже свойство. Таким образом, правило с !important будет подовлять другие значения отступа, и в других браузерах они будут отображаться правильно. Вот к примеру:

1
2
3
4

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

Есть еще много разных советов и правил. Об этом можно говорить и говорить. Если Вас интересуют еще советы и правила – пишите. Распишу все по полочкам =)

Постовой:

Личный блог фрилансера Миши Cheerful’a. О дизайне, хип-хопе и человеческих глупостях.

PS: Отличный хостинг! Размещайте свои ресурсы на хороших, качественных хостингах дабы избежать лишних проблем!

Теги: css, h1, IE6, список

На тему «Шесть отборных советов CSS.» 4 комментариев:

А я вот не соглашусь с пунктом 2. Совсем не соглашусь.
Все таки ul и ol это совершенно разные вещи.
ul li { … }
ol li { … }
А вдруг мне надо использовать различные стили для простых списков и для нумерованных? И что тогда?
Вы же сказали про исключительный случай когда li и там и там одинаков.

АлаичЪ | 14 Апрель 2010 в 20:12

Ответить

Ну тогда уже надо прописывать правила для каждого селектора…тут уж не как. Тоже самое будет если в списке имеется вложеный список, который создается автоматически, и ему нельзя присвоить какой-либо класс…тогда надо будет писать так:

1	#идентификатор ul li ul li{...}

или же

1	#идентификатор ul li ol li{...}

Есть еще решения. Но сейчас нету времени их расписать. Может как-то уделю этому целую статью =)

Masterix | 14 Апрель 2010 в 21:31

Ответить

Ну вот примерно это я и имел ввиду. В общем вы меня поняли правильно.
Статья для новичка в css сойдет. А для продвинутого верстальщика…ну он и сам знает все секреты