Должен ли я использовать более одного листа CSS? - PullRequest
Новая
       9

Должен ли я использовать более одного листа CSS?

16 голосов
/ 20 мая 2010

Я обновляю веб-сайт, чтобы добавить несколько мобильных дружественных страниц.

На данный момент у нас есть одна большая страница CSS со всем. Моя идея состоит в том, чтобы поместить все специальные CSS для мобильных устройств в отдельный файл и затем связать оба листа. Мобильный CSS переопределит все что угодно в стандартном CSS (большие кнопки и т. Д.).

Я совершенно новичок в css, какая лучшая практика?

Ответы [ 11 ]

17 голосов
/ 20 мая 2010

Один большой файл CSS приводит к меньшему количеству HTTP-запросов, что может повысить производительность.

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

10 голосов
/ 20 мая 2010

У меня есть несколько таблиц стилей для любого значимого приложения, над которым я работал.

  • base.css - всегда применяется.
  • print.css - это скрывает меню и другие части экрана, не очень хорошо для печатной страницы. Вызывается атрибутом media. <link rel="stylesheet" type="text/css" media="print" href="print.css" />
  • ie6.css - применяется вторым, и тогда и только тогда, когда это IE6. Я надеюсь выкинуть это когда-нибудь.
  • .css - одна таблица стилей для каждого клиента, который хочет, чтобы у сайта был свой логотип / и т. Д.

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

По большей части дополнительное оборудование дешевле, чем дополнительные часы разработчика и / или больше ошибок. Ремонтопригодность, как правило, самая высокая цель для меня.

4 голосов
/ 20 мая 2010

Легко использовать отдельные таблицы стилей для разных носителей. 

<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

В этом случае весь стиль будет загружен и применен, когда тип носителя соответствует устройству.

Однако есть и другой метод, который удобен, если ваше приложение предназначено для мобильных устройств, поскольку оно загружает таблицу стилей ТОЛЬКО при совпадении типа носителя. 

<style type="text/css" media="screen">
  @import "screen.css"; /* Note that some (older?) browsers don't support @import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
  @import "mobile.css";
</style>
<style type="text/css" media="print">
  @import "print.css";
</style>
4 голосов
/ 20 мая 2010

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

4 голосов
/ 20 мая 2010

да, вы должны использовать более одного файла CSS, а не один большой файл. Это помогает вам, поддерживая ваш сайт, также использовать разные определения (classe или id name) в разных css, иначе это будет то, которое было объявлено позже. Например 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
     <head>
        <link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
      </head>

      <body>
         <!-- Your content here -->
      </body>
  </html>
1 голос
/ 20 мая 2010

У вас должен быть ряд листов CSS для различных задач, иначе все быстро запутается!

1 голос
/ 20 мая 2010

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

1 голос
/ 20 мая 2010

Значительно сгруппируйте ваш CSS и тщательно обслужите.

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

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

Сгруппируйте ваш CSS по медиа, для которого они используются. Если у вас есть таблица стилей для печати, держите ее отдельно от основных таблиц, если это имеет смысл (не используйте отдельные файлы, если у вас есть только одно свойство CSS для печати, поскольку оно не стоит времени на запрос).

Имейте в виду, что больше листов принимает больше запросов HTTP, и каждый запрос занимает определенное количество времени.

Так что нет явного способа, которым эти вещи должны быть обработаны, все дело в том, чтобы сделать ваш CSS более простым в обслуживании и легким для загрузки клиентом (меньше HTTP-запросов, меньший размер и т.

1 голос
/ 20 мая 2010

Я бы тоже использовал два. Сохраняет порядок при редактировании для каждого устройства (компьютера и мобильного устройства). У меня есть одна огромная таблица стилей CSS, которую я использую для всех браузеров с помощью сценария выбора браузера css, и я ненавижу скролить более 6000 строк CSS, поэтому я бы сказал, что лучший способ, по крайней мере, из опыта, это отделить их!

0 голосов
/ 17 июня 2010

Я сам предпочитаю две таблицы стилей. Первый и тот, который всегда стоит первым в моем HTML, это таблица стилей сброса. Реализация этой первой таблицы стилей помогает более равномерно отображать веб-страницы в разных браузерах.

Часто нет необходимости создавать более одной дополнительной таблицы стилей. Обычно команды CSS, специфичные для IE, игнорируются Firefox и другими совместимыми браузерами и наоборот. Реальная проблема возникает, когда элемент на странице должен быть расположен и иметь одинаковый размер в нескольких браузерах - в этот момент становится необходимым более двух листов, хотя иногда возможно получить хорошие результаты путем правильного упорядочивания внутри листа.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...