Оптимизация css кода, также, как и html кода, безусловно важна. И не только для удобство редактирования кода (ведь часто приходится что-то менять, дописывать), но также это влияет на ряд других факторов, таких, как скорость загрузки сайта и т. д.
Структурируем css код
Что такое оптимизация css кода? Это его структурирование, очистка от лишнего мусора. Безусловно, лучше, если Ваш код будет наглядным и красивым. В первую очередь, Вы делаете это для себя, ведь часто будете заглядывать в код. Итак, посмотрим пример.
Не оптимизированный css код:
p {background-color: orange; color: red; font-size: 15px; margin: 5px; padding: 10px;}
h1 {background-color: red; color: green; font-size: 25px; margin: 4px; padding: 5px;}
Оптимизированный css код:
p {
background-color: orange;
color: red;
font-size: 15px;
margin: 5px;
padding: 10px;
}
h1 {
background-color: red;
color: green;
font-size: 25px;
margin: 4px;
padding: 5px;
}
Согласитесь, второй код выглядит более красивым и структурированным. Хотя, возможно, что первый код выглядит более компактно. Но принято писать именно так, как во втором варианте. Хотя работать будет в обоих случаях.
Сокращайте код
Многие свойства в css можно сократить. Сюда входят такие свойства, которые пишутся через дефис. Например, возьмем фон в css (background) и посмотрим, как его можно сократить.
Не сокращенный код:
body {
background-color: orange;
background-image: url(fon.jpg);
background-repeat: no-repeat
background-position: right top;
}
Сокращенный код:
body {
background: orange url(fon.jpg) no-repeat right top;
}
Результат один и тот же. То есть мы не стали писать все свойства background, а прописали один раз background - и все значения. А css уже сам поймет, к какому именно свойству фона мы пишем значения.
В сокращенном коде мы пишем значения просто через пробел. Чаще всего нет разницы, в каком порядке писать значения.
Css комментарии
В css, также, как и в html, существуют комментарии в коде. Они нужны лично для Вас и помогают лучше ориентироваться в коде, ведь он может быть большой (чаще всего так и бывает) и порой в нем трудно разобраться.
Комментарии указываются так:
/* Комментарий */
Пример комментария в css код:
/* Стили для параграфа */
p {
background-color: orange;
color: red;
font-size: 15px;
margin: 5px;
padding: 10px;
}
/* Стили для заголовков */
h1 {
background-color: red;
color: green;
font-size: 25px;
margin: 4px;
padding: 5px;
}
То что находится внутри символов /* */ не видно при просмотре страницы в браузере, а также никак не влияет на код. Так что в комментариях можете писать все что пожелаете.
