Домой / Учебник Css / 6 Урок. Оптимизация css кода

6 Урок. Оптимизация css кода

Оптимизация css кода, также, как и html кода, безусловно важна. И не только для удобство редактирования кода (ведь часто приходится что-то менять, дописывать), но также это влияет на ряд других факторов, таких, как скорость загрузки сайта и т. д.

Структурируем css код

Что такое оптимизация css кода? Это его структурирование, очистка от лишнего мусора. Безусловно, лучше, если Ваш код будет наглядным и красивым. В первую очередь, Вы делаете это для себя, ведь часто будете заглядывать в код. Итак, посмотрим пример.

Оптимизация 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) и посмотрим, как его можно сократить.

Сокращение css кода
Сокращение css кода

Не сокращенный код:

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;
}

То что находится внутри символов /* */ не видно при просмотре страницы в браузере, а также никак не влияет на код. Так что в комментариях можете писать все что пожелаете.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *