Как улучшить CSS код

Я думаю, Вы уже догадались, что тема данной статьи будет про компактность (опрятность) CSS кода. Без сомнения, все предложенные варианты написания кода в этой статье работают, но все же я бы хотел обратить Ваше внимание на некоторые моменты, которые совершают новички при написании CSS кода.

В ходе разработки, мне довольно-таки часто приходиться сталкиваться с разным исходным CSS кодом. Совсем недавно столкнулся с таким вот нерациональным написанием:

.class {
  margin-top: 15px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #cc0000;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;
  font-weight: bold;
}

Зачем городить такую кучу, если можно сделать проще:

.class {
  margin: 15px 10px 5px 5px;
  border: 5px solid #333333;
  font: bold 14px Verdana, Helvetica, Arial;
}

Поля и отступы

.class {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 12px;
  margin-left: 7px;
}

Более «правильный» вариант:

.class {
  margin: 10px 5px 12px 7px;
}

Стоит отметить, что компактная форма записи margin: 10px 5px 12px 7px дается строго в определенной последовательности: первое значение — отступ сверху (top), второе — отступ справа (right), третье — нижний отступ (bottom) и четвертое — отступ слева (left).

margin

Запоминается это очень даже легко. Представьте себе квадрат и запомните, что:

  • верхняя грань (top) — первое значение (отступ сверху);
  • правая грань (right) — второе значение (отступ справа);
  • третья грань (bottom) — третье значение (нижний отступ);
  • четвертая грань (left) — четвертое значение (отступ слева).

По граням ходим исключительно по часовой стрелке

Ситуация, когда левый и правый край имеют те же самые значения:

.class {
  margin-top: 10px;
  margin-right: 12px;
  margin-bottom: 5px;
  margin-left: 12px;
}

Правильный вариант написания будет выглядеть так:

.class {
  margin: 10px 12px 5px;
}

Случай, когда поля имеют одинаковые значения со всех сторон, они могут быть записаны следующим образом:

.class {
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

Более простой вариант:

.class {
  margin: 5px;
}

Границы

Очень часто встречается вот такое написание стилей для границ:

.class {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

Правильней и компактней будет вот так:

.class {
  border: 5px solid red;
}

Если Вы хотите сделать стиль только для правой границы в CSS:

.class {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: red;
}

Тогда уж лучше написать вот так:

.class {
  border-right: 1px solid red;
}

Для присвоения ширины каждой границе, пишем не так:

.class {
  border-top-width: 5px;
  border-right-width: 4px;
  border-bottom-width: 5px;
  border-left-width: 4px;
}

А вот так:

.class {
  border-width: 5px 4px;
}

Фон

Меняем это:

.class {
  background-color: #FFFFFF;
  background-image: url(images/background_white.gif);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top left;
}

На это:

.class {
  background: #FFF url(images/background_white.gif) no-repeat top left;
}

Шрифт

Такая вот лажа вообще очень часто встречается:

.class {
  font-family: Arial, Helvetica;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  font-variant: normal;
  line-height: 1.3;
}

Что очень плохо, как по мне. Правильней будет записать вот так:

.class {
  font: italic bold 12px/1.3 Arial, Helvetica;
}

Сначала у нас идет стиль → начертание шрифта → затем размер → высота и сам шрифт.

Если нет font-style, тогда просто шрифт → его размер и начертание:

.class {
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
}

Упрощаем вот так:

.class {
  font: bold 12px Tahoma;
}

Стили списков

Меняем это:

.class {
  list-style-image: url(images/nice-bullet.gif);
  list-style-position: inside;
  list-style-type: square;
}

На это:

.class {
  list-style: square inside url(images/nice-bullet.gif);
}

Цвета

Наверное Вы уже знаете, что шестнадцатеричный RGB-код дается в определенной последовательности: первые две цифры — красный, два других — зеленый и два последних — синего цвета. Но если цифры каждого цвета идентичны друг другу:

.class {
  color: #FFCC00;
}

В таком случае, может быть записано короче, с использование одной цифры каждого цвета:

.class {
  color: #FC0;
}

Вроде все, надеюсь основная идея понятна. Пишите CSS код компактным и опрятным.

Похожие заметки
Последние заметки
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

29 комментариев

  1. Юлия,
    1

    Для меня супер-полезная информация. Возьму в закладки!

    У меня на блоге некоторый барадак со стилями. Попробую по этой статье понемногу привести все в порядок.

  2. Евгений Москаленко,
    2

    Юля, старайся писать css, как можно компактней. :-)

  3. Юлия,
    3

    А на что-то влияет компактность прописки стилей?

    Еще бы уметь разбираться что да как в них. Нужно много учиться этому. Я пока только азы познаю.

  4. Евгений Москаленко,
    4

    Компактность влияет в первую очередь на размер CSS файла. Чем ниже размер, тем быстрее грузиться CSS-файл, меньше ожидание пользователем загрузки страницы сайта.

    Затем уже идут опрятность и компактность CSS-файла. Чем компактней файл, тем проще он воспринимается в ходе разработки.

  5. Юлия,
    5

    Понятно. Спасибо!

    Буду осваивать науку... :)

  6. Максим,
    6

    Работаю с CSS уже месяц, Ваши пояснения облегчат мне работу минимум в четверо. Друзей кто понимает у меня нет, а в интернете находил только сложные алгоритмы. Буду использовать!

  7. Евгений Москаленко,
    7

    Спасибо. Как успехи в работе? :-)

  8. Максим,
    8

    Стараюсь очень!)) Нужно привыкнуть, немного закипаю, но стало гораздо лучше, спасибо! :-) Как у Вас?

  9. Евгений Москаленко,
    9

    Тоже все хорошо, спасибо. :-)

  10. Антонина,
    10

    Большое спасибо за подсказку, очень своевременно! Ваш вариант написания кода намного опрятней, и разобраться в нем будет проще. Несмотря на давнее знакомство с CSS, не знала о таких нюансах.

  11. Евгений Москаленко,
    11

    И Вам спасибо, Антонина. :-)

  12. Иван,
    12

    Информация подана очень понятно и просто. Статья замечательная, подчеркнул для себя многое. Теперь моя работа с CSS будет намного лучше. Выражаю благодарность автору! Блог добавлю в избранные ;)

  13. Евгений Москаленко,
    13

    Спасибо, Иван. :-)

  14. Flashm,
    14

    Спасибо большое за урок. Все ведь знают насколько важна эстетика кода. Он должен быть чистым, для того, чтобы его мог разобрать каждый человек, даже новичок в css. Ваш урок отлично объяснил как добиться этого всего)

  15. Flashm,
    15

    Отличный урок! Мне очень помог добиться того, чтобы мой код был бы чистым и хорошо понимает. Даже новичек в css после просмотра кода сможет слегкостью в нем разобраться и внести все ему необходимые изменения. В ведь чистый код выглядит очень красиво и этетично)

  16. Денис,
    16

    На каждом своем сайте проделываю подобную работу + отимизирую его, свожу нагрузку к минимуму. Остальные так же рекомендую делать, сайт начинает быстрее работать.

  17. ArmagedoN,
    17

    спасибо почитал...интересненький кодик получается

  18. Таки да :-)

  19. Рома,
    19

    Хоть и не программист, прочитав статью понял о чем речь, спасибо автору за детальность и простоту в тексте.

  20. Всегда пожалуйста, Роман... :-)

  21. Лиза,
    21

    Очень полезная информация. Прочитала и поняла,что делаю некоторые ошибки, о которых вы пишите. Будем исправляться. Спасибо

  22. Tatiana Egorova,
    22

    спасибо статья помогла. CSS стал более понятен для восприятия. Да и вообще стараюсь развивать свои знаия о написании сайтов.

  23. Это здорово... :-)

  24. Спасибо очень интересная статья)

  25. Максим,
    25

    Безусловно, лучше писать в компактном виде.

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

    Всегда пишу в компактном виде.

    На самом деле эти правила взаимозаменяемости очень просты, и легко запоминаются после нескольких килострок кода. :)

  26. Евгений Москаленко,
    26

    Ага, но сейчас уже лучше использовать SASS и минимизацию скриптов и стилей... :-)

  27. zmoe,
    27

    Спасибо, очень доходчиво написали, все сразу понятно, возьму в закладки!

  28. Василий Блинов,
    28

    Хороший урок, я сейчас на втором проекте пробую самостоятельно изучать сайтостроение. Подчистил в ручную стили, файл уменьшился почти на 2.5 процента.

  29. Алексей,
    29

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

Оставить комментарий