Оптимизация 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; }
То что находится внутри символов /* */ не видно при просмотре страницы в браузере, а также никак не влияет на код. Так что в комментариях можете писать все что пожелаете.