Я обновляю сайт, чтобы добавить некоторые мобильные страницы.
На данный момент у нас есть одна большая страница 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 приводит к меньшему количеству HTTP-запросов, что может повысить производительность.
Несколько небольших файлов приводят к упрощенной организации, что упростит и упростит разработку и обслуживание.
У меня есть несколько таблиц стилей для любого значимого приложения, над которым я работал.
media.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />Если бы я пытался добиться быстрой производительности, я бы их объединил. Тем не менее, я знаю, что сайты, получающие сотни миллионов обращений в день, не беспокоят, поэтому я настоятельно рекомендую их разделить, но имеет смысл для вас, чтобы упростить обслуживание.
По большей части дополнительное оборудование дешевле, чем дополнительные часы разработчика и/или больше ошибок. Поддержание работоспособности, как правило, является самой высокой целью для меня.
В случае стилей для конкретных клиентов я бы сказал, что лучше всего их разделить.
Простое использование отдельных таблиц стилей для разных носителей.
<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, которую я использую для всех браузеров с помощью селектора браузера css script, и мне не нравится прокручивать 6000 строк в CSS, поэтому я бы сказал, что лучший способ, по крайней мере, из опыта отделить их!
Сгруппируйте свой CSS и внимательно его обслуживайте.
Например, если у вас есть CSS, который применяется через ваш сайт (например, CSS reset), сделайте его отдельным файлом и включите его для каждой страницы.
Затем для каждого логического компонента вашего сайта создайте отдельный файл CSS и подайте его на страницы, относящиеся к соответствующему логическому компоненту. (Скажите, что у вас есть блог и опросы на вашем сайте, если блог никогда не нужен CSS для опросов, которые вам не нужно включать в блог.) Но не забудьте, что это мало практично для небольших сайтов.
Группируйте свой CSS на носителях, для которых они используются. Если у вас есть таблица стилей для печати, сохраните ее отдельно от ваших основных листов, если это имеет смысл (не используйте отдельные файлы, если у вас есть только одно свойство CSS для печати, так как оно не стоит времени запроса).
Имейте в виду, что больше листов принимает больше HTTP-запросов, и каждый запрос стоит определенное количество времени.
Таким образом, не существует явного способа управления этой вещью, все это упрощает загрузку CSS и упрощает его загрузку (меньше запросов HTTP, меньшего размера и т.д.).
Я бы использовал несколько таблиц стилей, чтобы лучше организовывать вещи, а затем сжимать их в один файл, прежде чем помещать их на сайт, чтобы повысить производительность.
У вас должен быть ряд листов CSS для различных задач, иначе все становится беспорядочно быстрым!
Я думаю, что лучше использовать 1 для стиля, 1 для ie6 для ie7. Больше ничего. Организация должна быть автоматической внутри style.css. Использование логических имен классов и комментариев.
Меньше httprequests - это хорошо. Меньшая разметка хорошая.:)
Я предпочитаю две таблицы стилей. Первый, и тот, который всегда на первом месте в моем HTML, представляет собой таблицу стилей reset. Реализация этой первой таблицы стилей помогает веб-страницам отображаться более последовательно в разных браузерах.
Часто нет необходимости создавать более одной дополнительной таблицы стилей. Как правило, команды CSS, специфичные для IE, игнорируются Firefox и другими совместимыми браузерами и наоборот. Реальная проблема возникает, когда элемент на странице должен располагаться и быть одинаковым для разных браузеров - в этот момент требуется более двух листов, хотя иногда бывает возможным получить хорошие результаты за счет правильного упорядочения внутри листа.