Сокращения в CSS

Сегодня разберемся с сокращениями в css. Статья эта скорее для начинающих, чем для опытных людей, но тем не менее, это полезная информация =)

Итак, для чего это нужно? Первое, уменьшение размера css-файла (ну или html-страницы), вследствие чего и время на его загрузку сократится (бывают ну оочень большие css-файлы, которые и сократить можно на оочень много). Второе, сокращение времени написания кода. Третье, лучшая удобочитаемость (меня порой напрягает читать длиннющий список свойств селектора, когда можно его сильно урезать). Знаю, что неубедительно, но поверьте мне на слово =)

Хотя нет, вот пример:

Длинный список:

border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: blue;
border-left-width: 1px;
border-left-style: solid;
border-left-color: gray;

Сокращенный список:

border-top: 1px solid black;
border-right: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid gray;

А если для всех сторон граница одинаковая, то и вовсе одна строка:

border: 1px dashed blue;

Вникли? Ок, а теперь поехали. Пара кратеньких советов для начала:
Если значение 0, то величину измерения писать не обязательно - ни одного пикселя равно ни одному сантиметру. Т.е. вместо height:0px; можно написать просто height:0;

Если цвет составлен тремя парами шестнадцатеричных чисел, можно задавать цвета в сокращенном варианте - удаляя каждую вторую цифру: #000 = #000000, #369 = #336699.

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

Что касается id и class, то не вижу смысла писать так:
div#footer { font... bla-bla-bla}, когда id и так должен быть уникален на странице, и можно написать просто #footer { ... }

То же касается и class'а, если он используется ограниченно. Ну а если нет, то хороший вариант - указывать в атрибуте class в html-тэгах несколько классов. К примеру: <div class="hello world">
Т.е. у нас есть класс hello и класс world, в одном можно задавать шрифт и его размер, в другом границы, и, может быть, тоже размер шрифта (вообще, как вам вздумается), и комбинировать их в случае необходимости.

Хорошим тоном считается использование селекторов потомков. Например, если у нас имеется список, заключенный в div с id="menu"

<div id="menu">
<ul>
<li class="navitem"><a href="#" class="navitem">Item 1</a></li>
<li class="navitemsel"><a href="#" class="navitemsel">Item 2</a></li>
</ul>
</div>

то мы можем написать

div#menu ul { ... }
div#menu ul li.navitem a.navitem { ... }
div#menu ul li.navitemsel a.navitemsel { ... }

что очень глупо, поскольку (само собой) лучше сделать так:

<ul id="nav">
<li><a href="#">Item 1</a></li>
<li class="sel"><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>

и CSS соответственно:

#nav { ... }
#nav li { ... }
#nav a { ... }
#nav .sel { ... }
#nav .sel a { ... }

и в том же духе.

А теперь рассмотрим, как можно сокращать некоторые параметры.

Margin и Padding

При написании margin:10px; задается отступ в 10px со всех сторон. Вы наверняка встречали и следующий вариант написания “margin:10px 15px;”, и такой “margin:10px 15px 10px;”, и даже такой “margin:10px 15px 10px 5px;”. Здесь есть несколько тонкостей: если за свойством следует одно значение, то оно применяется ко всем сторонам, если два значения - первое применяется к верхней и нижней сторонам, второе - к боковым. В случае, когда указано три параметра, первое значение обозначает верхнюю сторону, второе - левую и правую, третье - нижнюю. Ну а когда указано четыре параметра, первое значение задает верх, второе - правую сторону, третье - низ, четвертое - левую сторону, т.е. по часовой стрелке начиная с верха . Для padding все точно так же.

Font

Формат написания:
font: font-style || font-variant || font-weight || font-size[/line-height] || font-family | CSS2FontConstant

font-family: Verdana, Tahoma;
font-style: normal;
font-weight: bold;
font-variant: normal;
font-size: 11pt;
line-height: 13pt;

можно кратко написать так:

font:normal normal bold 11pt/13pt Verdana,Tahoma;

Border

Формат написания:
border: border-width || border-style || color

Пример:

border-width: 1px;
border-style: solid;
border-color: black;

пишем:

border: 1px solid black;

Если мы хотим изменить рамку для одной конкретной стороны, то можно сперва задать рамку для всех сторон, а далее делать уточнения

border: 1px dashed grey;
border-top-width: 4px;

Background

Формат написания:
background: background-attachment || background-color || background-image || background-position || background-repeat

Пример:

background-attachment: scroll;
background-color: #FFF;
background-image: url(images/hey.gif);
background-position: top left;
background-repeat: no-repeat;

пишем:

background: scroll #FFF url(images/hey.gif) top left no-repeat;

Надеюсь, вам было полезно ознакомиться. Для профессионалов, возможно, ничего нового тут и не было, но для новичков, надеюсь, я дал полезную информацию для размышлений и последующих поисков в данном поле.

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.