Различный способы подключения стилей

[volshebnyi]

Здравствуйте!

 

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

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css"><link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css"><link rel="stylesheet" media="(orientation: portrait)" href="portrait.css"><link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Естественно, можно все сделать в одном файле стилей.

 

Уважаемые профи, какой способ используете Вы и почему?

[Vlad]

Я использую один файл, потому что мне так удобнее.

[forest79]

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

[volshebnyi]

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

 

Так файл то все-равно грузится только один.

Edited September 22, 2015 by volshebnyi

[forest79]

Только одного файла с медиазапросами быть не может. Как минимум должен быть файл с основными стилями. Могут подключаться reset.css, fonts.css , стили всяких плагинов. Вот и получается куча мала. И каждый файл - это запрос к серверу. А 1 запрос как бы лучше, чем 5-8.

[volshebnyi]

Только одного файла с медиазапросами быть не может. Как минимум должен быть файл с основными стилями. Могут подключаться reset.css, fonts.css , стили всяких плагинов. Вот и получается куча мала. И каждый файл - это запрос к серверу. А 1 запрос как бы лучше, чем 5-8.

 

Я делаю несколько файлов. Ресет или нормалайз или стили плагинов вставляю в каждый css. В мобильной версии, например, может не быть какого-то слайдера. Соответственно, в стилевом файле для мобильной версии стили для этого слайдера будут отсутствовать. 

В итоге получается картина - в зависимости от разрешения, браузер загружает только один файл со стилями. Это подход, конечно, вроде бы правильный - под каждое разрешение только один файл без лишних (не своих) стилей. Но такой подход не удобен при верстке и, особенно, при последующем редактировании...

[forest79]

 

Только одного файла с медиазапросами быть не может. Как минимум должен быть файл с основными стилями. Могут подключаться reset.css, fonts.css , стили всяких плагинов. Вот и получается куча мала. И каждый файл - это запрос к серверу. А 1 запрос как бы лучше, чем 5-8.

 

Я делаю несколько файлов. Ресет или нормалайз или стили плагинов вставляю в каждый css. В мобильной версии, например, может не быть какого-то слайдера. Соответственно, в стилевом файле для мобильной версии стили для этого слайдера будут отсутствовать. 

В итоге получается картина - в зависимости от разрешения, браузер загружает только один файл со стилями. Это подход, конечно, вроде бы правильный - под каждое разрешение только один файл без лишних (не своих) стилей. Но такой подход не удобен при верстке и, особенно, при последующем редактировании...

 

Согласен.

[hypnocolor]

Раньше тоже медиа-запросы делал отдельным файлом, теперь с использованием Сасса, Галпа и прочих автоматизирующих штук делаю по-другому: на каждую страницу — свой файл стилей, в котором прописаны стили элементов, используемых только на этой странице. Соответственно, для общих элементов (кнопки, breadcrumbs и т.д.) есть свой отдельный файл. Медиа-запросы прописываю сразу для каждого элемента отдельно, дабы добиться абсолютной независимости и гибкости в управлении поведением каждого отдельного элемента. Ну а потом Галп всё это дело склеивает и минифицирует в одном файле. Немного жалею, что долгое время был старовером и игнорировал такой удобный подход. Кто-то может скептически отнестись к тому, что медиа-запросы долго и утомительно набивать на каждый элемент, но тут на помощь, как и во многих других случаях, приходит Эммет  Можно ещё миксин для медиа-запросов написать, но мне лично пока удобно и так.

 

Небольшой пример того, о чём говорю:

.contacts-top {	margin: 0 auto;	max-width: $siteMaxWidth;	padding: 80px $mobilePadding 30px;	position: relative;	@media screen and (min-width: 1024px) {		padding: 200px $tabletPadding 100px;	}	&__title {		color: $darkGray;		font-family: $fontOpenSans;		font-size: 20px;		font-weight: 600;		line-height: 1.5;		margin-bottom: 30px;		@media screen and (min-width: 640px) {			font-size: 28px;		}		@media screen and (min-width: 1024px) {			font-size: 38px;			margin-bottom: 60px;		}	}}

Edited September 23, 2015 by hypnocolor

[volshebnyi]

Я использую один файл, потому что мне так удобнее.

Влад, а Вы пишите с помощью сасса и т.п. или же нативно - чистым css?

[Vlad]

Да по всякому. Для маленьких сайтов можно и вручную всё набросать.