Я обновляю сайт, чтобы добавить некоторые мобильные страницы.Должен ли я использовать более одного листа CSS?
На данный момент у нас есть одна большая страница css со всем. Моя идея - поместить все мобильные специфические css в отдельный файл, а затем соединить оба листа. Мобильный css будет преодолевать что-либо в случае css по умолчанию (большие кнопки и т. Д.).
Im совершенно новый для css, что такое лучшая практика?
Да, вы должны использовать более одного файла css, используя один большой файл. Он помогает вам при сохранении вашего сайта также использовать разные определения (имена кладов или идентификаторов) в разных 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>
В случае стилей для конкретных клиентов, я бы сказал, что это лучшая практика, чтобы отделить их.
Я бы использовал два. Сохраняет вещи более аккуратными при редактировании для каждого устройства (компьютер и мобильное устройство). У меня есть одна огромная таблица стилей CSS, которую я использую для всех браузеров с помощью сценария селектора браузера css, и мне не нравится прокручивать 6000 строк в CSS, поэтому я бы сказал, что лучший способ, по крайней мере, из опыта состоит в том, чтобы разделить их!
Один большой файл CSS приводит к меньшему количеству HTTP-запросов, что может повысить производительность.
Несколько небольших файлов приводят к упрощению организации, что сделает разработку и обслуживание более дешевыми и удобными.
Отличный ответ, кратко сказано. – Armstrongest
У меня есть несколько таблиц стилей для любого значительного приложения, над которым я работал.
media. <link rel="stylesheet" type="text/css" media="print" href="print.css" />Если бы я пытался добиться высокой производительности, я бы их совпадал. Тем не менее, я знаю, что сайты, получающие сотни миллионов обращений в день, не беспокоят, поэтому я настоятельно рекомендую их разделить, но имеет смысл для вас, чтобы упростить его обслуживание.
По большей части дополнительное оборудование дешевле, чем дополнительные часы разработчика и/или более ошибок. Поддержание работоспособности, как правило, является самой высокой целью для меня.
Сгруппируйте свой CSS и тщательно его обслуживайте.
Например, если у вас есть CSS, который применяется через ваш сайт (например, сброс CSS), сделайте его отдельным файлом и включите его для каждой страницы.
Затем для каждого логического компонента вашего сайта создайте отдельный файл CSS и подайте его на страницы, принадлежащие соответствующему логическому компоненту. (Скажем, у вас есть блог и опросы на вашем сайте, если блог никогда не нуждается в CSS для опросов, которые вам не нужно включать в блог.) Но не забудьте, что это мало практично для небольших сайтов.
Группируйте свой CSS на носителях, для которых они используются. Если у вас есть таблица стилей для печати, сохраните ее отдельно от ваших основных листов, если это имеет смысл (не используйте отдельные файлы, если у вас есть только одно свойство CSS для печати, так как оно не стоит времени запроса).
Имейте в виду, что больше листов допускает больше HTTP-запросов, и каждый запрос стоит определенное количество времени.
Так что не явным образом эти вещи должны быть обработаны, все это о том, чтобы ваш CSS проще в обслуживании и легко для клиента для загрузки (меньше HTTP запросов, меньший размер и т.д.)
Использование отдельных таблиц стилей для различные материалы легко сделать.
<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>
Я думаю, что импортировать более одного css в один тег
Вы могли бы использовать разные значения 'media'? – xtofl
Если существует два определения для одного и того же селектора в stylesheet.css и another_css.css, который будет выбран? – Robert
@Robert Если селекторы идентичны, таблица стилей, объявленная позже в источнике, будет иметь приоритет. В этом случае это будет another_css.css. – AaronSieb