сколько css файлов можно подключить
Сколько css файлов можно подключить
Гостей: 3
| Гости: | |
| [Ваш IP] | 01:18:50 |
| /Статьи | |
| 54.36.148.3 | 01:17:34 |
| /Поиск | |
| 54.36.148.49 | 01:14:59 |
| Поиск по тегам | |
В данной заметке расскажу, как оптимизировать загрузку скриптов js и файлов css, а точнее — как избавится от дополнительных запросов к серверу, плюс существенно сократить html–код страницы.
На современных проектах используется масса дополнительных симпатичных плюшек, выполнение которых требует подключения дополнительных файлов javascript и таблиц каскадных стилей (CSS). Как выглядит обычно «шапка» нашей страницы? Примерно так:
Согласитесь, выглядит ужасно. Есть, конечно, вариант: объединить все файлы в один и загружать его. Но, на мой взгляд, есть один недостаток у этого метода: некоторые скрипты и стили нужны далеко не на всех страницах сайта, поэтому их загрузка будет лишней. Можно, конечно, возразить, сославшись на кэширование этих файлов, но это — отдельная тема для дискуссии. Я же сейчас хочу предложить более простой, но весьма действенный способ, а именно- воспользоваться возможностями сервера и погружать файлы «на лету», не делая дополнительных запросов и не засоряя разметку. Итак, начнем.
Важно!
(ищем apache2handler => Loaded Modules), либо воспользоваться функцией apache_get_modules();:
Далее мы создаем файл для подключения стилей, например, style.combined.css со следующим содержимым
И файл для подключения скриптов, например, script.combined.js со следующим содержимым:
Важно!
В принципе, всё уже готово. Последний штрих — убираем из нашей разметки все лишние подключения, оставив лишь подключение наших комбинированных файлов, то есть теперь «шапка» выглядит так:
То есть теперь, когда браузер сделает всего один запрос к нашим файлам, сервер выдаст ему подключение сразу всех скриптов и стилей. Думаю, весьма полезная вещь для оптимизации.
На этом пока всё. Всем всех благ и всего доброго.
Один CSS файл или несколько на сайт?
Простой 2 комментария
Ну хоть врать-то не надо. Просто скажи «мне лень гуглить, раскажите в тысячный раз, как нужно делать».
В исходниках для удобства отдельные файлы для страниц, секций, блоков или даже элементов.
На выходе 1 общий минифицированный и оптимизированный файл на все страницы.
P.S. На этапе разработки стили, относящиеся к конкретной секции/странице, для удобства лучше держать в отдельных файлах (тут на помощь приходят препроцессоры либо postcss), а затем для продакшена собирать их с помощью сборщика в единый css.
Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
Если настроено HTTP/2, то последний файл можно заменить россыпью файлов каждого блока со страницы. Но нужно замерить производительность такого подхода в каждом конкретном случае.
Какой ещё такой сборщик?
После оптимизации насколько удобно такой код поддерживать?
Поддерживаете вы неминимизированные исходники, поэтому настолько же, насколько и до.
Как подключить CSS (каскадные таблицы стилей) к HTML?
Очень важно отметить, что HTML – это не язык программирования, как считает большинство неопытных пользователей, а лишь средство для верстки веб-страниц и никак иначе! Запомните это. Очень много вижу нелепых сообщений, где люди говорят о том, что они программисты и пишут свои «программы» на HTML. Наверное, я вас огорчу, но это не так.
HTML – лишь инструмент для верстки страницы, и если вы занимаетесь этим – вы верстальщик. А вот если вы дополнительно пишите какие-нибудь скрипты или модули, на том же JavaScript или PHP – тут можно поговорить о таком понятии, как программист. Но речь сейчас пойдет не об этом, и когда мы точно узнали, является ли HTML языком программирования или нет, перейдем к главному этой статье.
Помимо того, что HTML выступает в качестве верстки ваших веб-страниц, существует такое понятие, как CSS (нет, это не игра Counter-Strike: Source, как могло подумать множество юных вебмастеров), это каскадные таблицы стилей. Суть их – это формирование общего стиля страницы или отдельного ее элемента. Простыми словами – отступы, цвет, шрифт, ширина, высота и прочие другие параметры настраиваются именно через эти стили.
Самих свойств существует большое множество, некоторые из них универсальны, а некоторые – персональны для того или иного элемента. Описывать их мы сейчас не будем, а остановимся на том, как же подключить ваши стили к HTML-документу.
Подключение внешней таблицы стилей
Самый распространенный способ подключения внешнего файла стилей – это:
Или сокращенный вариант для HTML5:
На что тут стоит обратить внимание?
Помимо этого, стили могут быть встроены еще несколькими способами.
Подключение внутренней таблицы стилей
Под внутренней таблицей стилей подразумевается отсутствие файла стилей. Свойства таблицы в таком случае вставляются на страницу следующим образом:
Или краткий вид для HTML5:
Здесь особых нюансов нет – вставлять конструкцию можете как в секцию HEAD, так и в BODY. Причем на странице, в разных ее частях может быть несколько таких конструкций.
Подключение встроенной таблицы стилей
Если вы исследовали различные сайты, смотрели, как устроена их верстка, то могли заметить, как стили прописываются непосредственно следующим образом:
Такой вариант и называется «встроенными стилями», применим ко всем элементам веб-страницы, будь то простой блок, изображение или встроенное видео.
Единственным нюансом здесь является то, что если во внешних или внутренних стилях не используется свойство «!important» – встроенное свойство является приоритетным по исполнению. Что это значит? Приведу простой пример:
Несмотря на то, что во внутренних стилях мы задали цвет фразы красный – она будет черной, так как это указано во встроенных стилях.
Группируем CSS. Директива @import
В статье, посвященной внешним таблицам стилей, говорилось о возможности подключать несколько различных CSS-файлов к одной HTML-странице, если использовать группу тегов link. Например, так:
Такой подход, когда таблицы стилей разделены на несколько файлов, иногда удобен. Он позволяет, как бы собирать общий CSS из отдельных блоков-файлов, используя только те из них, которые нужны непосредственно на данной странице.
Но злоупотреблять такой блочной структурой все же не стоит. Помни, что лишний файл — это лишнее обращение к серверу, а, значит, дополнительное время и трафик.
Впрочем, если ты все-таки решил использовать такую блочную структуру CSS, то, кроме тегов link, у тебя есть еще один вариант — директива @import.
Соединяем несколько CSS
Как ты, наверное, помнишь, в CSS-файле не может быть никакой HTML-разметки. То есть теги link, конечно, записываются непосредственно в файле HTML (в секции head).
В отличие, от link, директива @import позволяет соединять таблицы стилей внутри CSS. Указанные в директиве CSS-файлы загружаются и присоединяются к тому CSS в котором встретилась @import.
Синтаксис
Примечания:
Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.
Так, как @import — это CSS-конструкция, то содержатся она должна либо в CSS-файле, либо внутри тега style (использовать @import во встроенных стилях нельзя!).
Резюме
Для создания блочной структуры CSS можно использовать два варианта.
Блочная структура удобна, например, в больших проектах, которые делает множество людей. Но помни, что для повышения быстродействия, как правило, таблицы наоборот, соединяют в один файл.
Поэтому использовать @import без реальной необходимости не стоит, т.к. страдает скорость загрузки.
Блог Vaden Pro
Использование import для подключения нескольких файлов в CSS
Данное разделение оформления сайта на несколько файлов приносит выгоду только в частном случае. Это действенно, если для практически идентичных элементов сайта нужно разное оформление.
Самой негативной чертой использования данного подхода является то, что растет количество обращений к серверу из-за наличия нескольких файлов CSS, что приводит к повышению трафика и роста времени обработки информации.
Однако, если все же пришлось использовать данную систему присвоения стилей, то стоит поговорить об операторе @import и его возможностях и функционале.
Объединение нескольких файлов CSS с import
В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.
Синтаксис
Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.
Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.
Далее следует более конкретный пример:
Некоторые полезные замечания
Структура создания CSS по блочной методике может осуществляться двумя путями:
Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.
Поэтому использовать директиву @import следует с умом и пониманием дела.