Меню
Спросить
*.{ }

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

8 ноября 2016
Урок 5. Оптимизация кода css

Всем привет, сегодня будем учиться оптимизировать код css. За основу возьмем код простой и понятный код:

  1. /*Это элемент a*/

  2. .a{
  3.      float:left;
  4.      margin: 0px;
  5.      padding:0px;
  6.      border:none;
  7.      width:100%;
  8.      color:white:
  9.      background:black;
  10. }

  11. /*Это элемент b*/
  12. .b{
  13.      float:left;
  14.      margin: 0px;
  15.      padding:0px;
  16.      border:none;
  17.      width:80%;
  18.      color:white:
  19. background:black;
  20. }

Зачем оптимизировать?

Зачем нужно оптимизация кода css?
Ответ короткий, но думаю понятный:
Оптимизировав код css, ты, тем самым, уменьшишь его размер, соответственно уменьшиться и размер файла css, ну и сайт в свою очередь станет весить меньше, а значит и грузиться сайт будет быстрее. И ты больше не будешь задавать таки вопросы, как: как ускорить загрузку страницы, почему сайт так долго грузится. Пользователь в свою очередь не будет ждать часами ответа от твоего сайта.

Как оптимизировать код css?

Если сказать вкратце, то нужно привести код в "нечитаемое" состояние для человека, но идеальный для машины(компьютера). Но как же определиться, то ли сделать код идеальным для человека, то ли для компьютера. Нам нужно найти золотую середину.

Пробелы

Для оптимизации нужно удалить все пробелы и переходы, естественно не забываем про удобство читания.
К примеру:

Этот код удобен для машины, но не совсем удобен для человека:

  1. /*Это элемент a*/.a{float:left;margin: 0px;padding:0px;border:none;width:100%;color:white:background:black;}/*Это элемент b*/.b{float:left;margin: 0px;padding:0px;border:none;width:80%;color:white:background:black;}

Этот код удобен для машины и человека:

  1. /*Это элемент a*/
  2. .a{
  3. float:left;
  4. margin: 0px;
  5. padding:0px;
  6. border:none;
  7. width:100%;
  8. color:white:
  9. background:black;
  10. }
  11. /*Это элемент b*/
  12. .b{
  13. float:left;
  14. margin: 0px;
  15. padding:0px;
  16. border:none;
  17. width:80%;
  18. color:white:
  19. background:black;
  20. }

Мы удалила всего лишь три перехода на новую строку, вроде ни чего не изменилось, но если мы будем удалять в огромном коде, то мы сэкономим достаточно места

Комментарии в css

Комментарии хоть и игнорируются машиной, но все таки занимают прилично места. Избавляемся от лишних комментариев:

  1. .a{
  2. float:left;
  3. margin: 0px;
  4. padding:0px;
  5. border:none;
  6. width:100%;
  7. color:white:
  8. background:black;
  9. }
  10. .b{
  11. float:left;
  12. margin: 0px;
  13. padding:0px;
  14. border:none;
  15. width:80%;
  16. color:white:
  17. background:black;
  18. }

0px

В некоторый случаях необязательно писать 0px, достаточно просто нуля. Собрав по всему коду эти px и оставив нули, мы вернем потерянные биты, а то и байты:

  1. .a{
  2. float:left;
  3. margin: 0;
  4. padding:0;
  5. border:none;
  6. width:100%;
  7. color:white:
  8. background:black;
  9. }
  10. .b{
  11. float:left;
  12. margin: 0;
  13. padding:0;
  14. border:none;
  15. width:80%;
  16. color:white:
  17. background:black;
  18. }

Реальная оптимизация кода css

Если мы соберем все вышеперечисленные приемы оптимизации, то мы достаточно хорошо уменьшим размер кода, но этого может быть недостаточно, поэтому познакомимся еще с одним приемом и пожалуй одним из самых важных.
Если посмотреть на элемент a и элемент b, то мы увидим, что свойства у них схожи между собой. Если это так, то можно их объединить, тем самым еще на много уменьшить размер кода css.

  1. .a, .b{
  2. float:left;
  3. margin:0;
  4. padding:0;
  5. border:none;
  6. width:100%;
  7. color:white:
  8. background:black;
  9. }
  10. .b{
  11. width:80%;
  12. }

Заключение

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

Следующая статьяПредыдущая статья