1

Делая адаптивную вёрстку, добился того, чтобы в зависимости от ширины окна была разная вёрстка и разные стили. Теперь я задумался о том, чтобы для каждой фазы (диапазона ширин экрана, при котором вёрстка и стили не меняются) разбить слилевой файл на несколько. Что из нижеследующих альтернатив будет лучшим вариантом с точки зрения оптимизации? (Если у Вас есть ещё какие-либо соображения, пожалуйста, приведите их).

  1. Поместить в head все стилевые файлы (применять одновременно будут стили только из 2 файлов, в остальных - медиазапросы для других фаз).

    <!--css-->
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <link rel="stylesheet" href="style/style1.css" type="text/css">
    <link rel="stylesheet" href="style/style2.css" type="text/css">
    <link rel="stylesheet" href="style/style3.css" type="text/css">
    <link rel="stylesheet" href="style/style4.css" type="text/css">
    <link rel="stylesheet" href="style/style5.css" type="text/css">
    
  2. Написать скрипт в JS, который при каждом изменеии фазы будет заменять в

    <!--css-->
    <link rel="stylesheet" href="style/styleN.css" type="text/css">
    

    N на номер фазы.

Если лучше второй способ, то как его лучше реализовать? По классу и идентификатору <link> не найти с помощью Jquery, получается остаётся только через getElementsByTagName.

4
  • а почему По классу и идентификатору <link> не найти с помощью Jquery?
    – Grundy
    11 июл 2016 в 6:12
  • Если link можно присваивать классы и идентификаторы, то я не знал. До этого момента я и не мог подумать, что возникнет необходимость присваивать класс к тому, что не принимает участие в вёрстке и не отображается. 11 июл 2016 в 7:52
  • да можно присваивать и классы и id, и выбирать по имени тега
    – Grundy
    11 июл 2016 в 7:54
  • чтож, в таком случае как вариант можно и заменить соответствующий черз DOM стилевой файл. 11 июл 2016 в 7:56

2 ответа 2

2

Используйте Grunt, куча модулей с удобными LESS или иными стилями. Но на продакшене все скомпилировано в одну min.css которая грузится быстрее и один раз. Также рекомендую при подключении css файла писать так:

<link rel="stylesheet" href="style/style.min.css?date=<?=filemtime('path to file')?>" type="text/css">

Это поможет избежать кеширования css файла. Тестируйте зесь https://developers.google.com/speed/pagespeed/insights/, гугл говорит чем меньше файлов и чем меньше их размер тем лучше.

2

Существует общепринятая практика. Когда разработчик пишет код, располагаю модули (файлы css или js ...) как ему удобно. А потом система сборки собирает проект и упаковывает всё в один файл.

Пример, здесь я пишу css с помощью процессора stylus

введите сюда описание изображения

Дальше моя система сборки, основанная на gulp собирает все css файлы в один и получается обычный css - понятный браузеру, но не такой удобный человеку.

введите сюда описание изображения

Подробности как сделать здесь: в 4 серии описана сборка стилей

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.