Как лучше оптимизировать css?

Question

[WebforSelf]

Вопрос такого плана,
есть к примеру
стандартные стили reset.css
Есть обычные стили по блокам к примеру style.css
/*header*/
тут стиль
/*/header*/
и адаптив responsive.css
там получается media запросы начиная с больших экранов
К примеру

/*@ MEDIA*/
@media (max-width: 1750px) {  

}

@media (max-width: 1600px) {  

}

@media (max-width: 1440px) {  

}
и т.д.

Вот примерно так, или лучше в том же style.css описывать
медиа запросы в том же файле и в том же блоке.
Как лучше реализовать это чтоб потом была возможность расширения блоков и не было каши.

Поделитесь опытом.

Comments

[Антон Литвиненко]

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

[S10LI]

Лучше когда стили располагаются в одном файле. Так меньше запросов к серверу и соответственно быстрее загрузка страницы

Но есть такие вещи как сборщики, которые берут все ваши css файлы и объединяют в один, что упрощает разработку

[WebforSelf]

Антон Литвиненко, мобайл фест вообще не понятно почему принцип. Т.к. чаще всего мобильную не отрисовывают, а просят оптимально сложить все в ряд.
То есть вы отдельно внизу прописываете все медиа запросы?

[Ankhena]

Как лучше реализовать это чтоб потом была возможность расширения блоков и не было каши.

Если в команде или в ТЗ нет изначального кодгайда, то без разницы как.
Лишь бы единообразно.

Мне удобно, когда код разбит на блоки. И всё про него написано в одном месте.
Плюсы:
+ не нужно никуда бегать и искать где от какого селектора media
+ легко взять блок и использовать его в другом проекте, не выковыривая по кусочкам

[WebforSelf]

S10LI, насчет сборщиков да, я именно к тому куда писать медиа запросы, чтоб потом оптимально все находить. к примеру

/*header*/
.logo {
fill:red;
}
@media (max-width: 1440px) {  
.logo {
fill:black;
}
}
/*/header*/

То есть тут все вместе, но суть в том что будет повторяться много раз одно и тоже
media (max-width: 1440px) - а это мжоно написать внизу один раз и все стили туда писать.

[WebforSelf]

Ankhena, Просто получается что у меня куча однообразных строк
медиа с размером.

[Ankhena]

WebforSelf,

мобайл фест вообще не понятно почему принцип. Т.к. чаще всего мобильную не отрисовывают, а просят оптимально сложить все в ряд.

1. Посмотрите на долю мобильного трафика.
2. Браузеру меньше всего обрабатывать. Взял первое правило и отрисовал.
При desktop-first будет несколько переопределений стилей.

Не важно что у вас в макете и как его рисовали. Это две разные истории: как рисовать/разрабатывать и как писать стили.
Так вот, для пользователя экономичнее, когда вы пишете стили в технике mobile-first.

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

[Ankhena]

WebforSelf,

Просто получается что у меня куча однообразных строк
медиа с размером.

Не очень понятно, что именно вы хотели этим сказать.
Развейте, пожалуйста, свою мысль или уточните сомнения.

[S10LI]

WebforSelf, больше лишних повторений - больше вес файла, дольше загрузка. Если вам важна скорость, то можно просто оптимизировать файл минифаерами, которые как раз соберут все лишние повторения и сократят код

[WebforSelf]

Ankhena, к примеру

/*header*/
.logo {
fill:red;
}
@media (max-width: 1440px) {  
.logo {
fill:black;
}
}
/*/header*/

/*footer*/
.logo_footer {
fill:red;
}
@media (max-width: 1440px) {  
.logo_footer {
fill:black;
}
}
/*/footer*/

Получается что media (max-width: 1440px) придется писать постоянно в каждом блоке. а не единожды например внизу.

[S10LI]

Ankhena, как я понимаю
Речь о следующем

header {}

@media  (max-width: 1440px) {
. header {}
}

footer {}
@media  (max-width: 1440px) {
. footer {}
}

Вместо того чтобы один раз для 1440 написать медик и в нем расположить header и footer

[Alfieros]

WebforSelf, каша ненужная.
Верстаете десктоп, и в конце файла дописываете вызов медиа, там уже корректируете под нужные размеры. Не нужно после каждого класса писать медиа, на выходе получите огромный размер файла.
Если сверстали хорошо, под мобилку обычно кроме размеров шрифтов или каких-то мелких моментов больше ничего не пишется. Да и сами шрифты можно рассчитать так, чтобы не пришлось их изменять в медиа. Но вот если нужен пиксель перфект, придется всё записывать.

[Ankhena]

S10LI, WebforSelf,

Вместо того чтобы один раз для 1440 написать медик и в нем расположить header и footer

Если уж разбиваете, то так, возможно, будет поудобнее:

.header {
  мобилкины стили

  @media (планшет) {
     планшетыкины  
  }
  @media (десктоп) {
     десктопа
  }
}


.footer{
  мобилкины стили

  @media (планшет) {
     планшетыкины  
  }
  @media (десктоп) {
     десктопа
  }
}

И очень удобно пользоваться миксинами.
Когда вы пишете

@media _lg {
}

вместо всей той истории с min-width.

Все равно сборщик потом соберет их вместе и сложит в низ файла, туда, где им и место.

[Антон Литвиненко]

Ankhena, ой, не факт, далеко не факт. вот пример это из середины скомпиленого другой командой файла, который попал мне в работу

тык

[Ankhena]

Антон Литвиненко, да, так бывает.
Сама тут чуть не забыла раскомментировать плагинчик. А был бы аналогичный кофуз.

Answer 1

[Сергей delphinpro]

1. Использовать пре/пост-процессор.
Это позволит вам удобно группировать ваши стили. Порядок – прежде всего!

2. Правила, относящиеся к одной сущности располагать в одном месте.
Вам не нужно будет прыгать по нескольким файлам, чтобы отредактировать какой-то элемент.

3. Использовать билд-систему для подготовки ассетов к публикации. Минификация, оптимизация и т.п. В том числе на этом этапе ваши разбросанные по блокам медиазапросы группируются и переносятся в конец выходного файла, уменьшая общий объем.

Опционально. Стоит всё-таки привыкать к принципу верстки "mobile first".