Что такое хорошая стратегия CSS?

Ответ 1

Я думаю, что лучший вариант - делить css на:

-layout.css

-content.css

Затем, если вам нужно другое более конкретное, вы можете добавить больше как css для рекламы: ads.css или один css для определенного раздела.

Я бы также добавил ie.css для IE css hacks.

Я бы не говорил о создании одного css только для одной страницы: проблема, которую вы можете иметь, если используете слишком много css, заключается в том, что вашей странице придется делать больше запросов на сервер, и это замедлит вашу страницу. Вот почему я рекомендую вам реализовать HttpHandler, который создаст копию кэша только в одном файле css, который вам нужен в данный момент. Смотри сюда: http://blog.madskristensen.dk/post/Combine-multiple-stylesheets-at-runtime.aspx

Ответ 2

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

Недвижимость-Based

Самая простая, представительная форма разбиения на основе свойств заключалась бы в использовании двух таблиц стилей: structure.css и style.css. Файл structure.css будет содержать правила, в которых используются только такие свойства, как высота, ширина, маржа, заполнение, поплавок, положение и т.д. Это эффективно будет содержать "строительные блоки", необходимые для упорядочения элементов страницы так, как вы хотите. Файл style.css будет содержать правила со свойствами, такими как фон, шрифт, цвет, текстовое оформление и т.д. Это эффективно действует как скин для структуры, созданной в другой таблице стилей.

Дополнительное разделение может включать использование файла typography.css, в котором вы разместите все свои свойства шрифта. Или файл colors.css, где вы разместите все свои свойства цвета и фона. Старайтесь не переходить за борт, потому что этот метод быстро становится больше проблем, чем стоит.

Структура-Based

Структурный метод разбиения таблиц стилей вращается вокруг разделяющих правил, основанных на тех элементах, к которым они применяются. Например, вы можете увидеть файл masthead.css для всего, что находится в заголовке, файл body.css для всего содержимого области содержимого страницы, файла sidebar.css для всего, что находится на боковой панели, и файла footer.css для все в нижней части страницы.

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

Hybrid

Как и следовало ожидать, гибридный метод сочетает в себе лучшее из обоих методов, и это мой предпочтительный выбор. Здесь вы создаете файл structure.css, как и в методе, основанном на свойствах, используя только те свойства, которые необходимы для создания основного макета. Затем вы создаете дополнительные таблицы стилей, такие как masthead.css, которые обрезают заголовок; body.css, который скрывает содержимое; и др.

Другие соображения

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

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

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

Ответ 3

Что вы можете сделать, так это иметь много простого в управлении, отдельные файлы для разработки, затем объединить их все вместе в один файл и минимизировать их на своем сайте.

Это немного больше работы по настройке, но дает вам лучшее из обоих миров - легко управлять сайтом + быстро загружать страницы.

Изменить: Yahoo Компрессор YUI кажется лучшим minifier. Он может сжимать как CSS, так и Javascript.

Ответ 4

Мое решение, среди множества:

• base.css/ reset.css: ваш фундамент {базовый макет, тип, цвет} - 100% повторное использование
• helper.css: основные правила компоновки модулей, а также "классы утилит" (варианты сетки, формы, таблицы и т.д.) - 90 +% повторного использования
• module.css: сложные правила компоновки модулей {семантические модули, например .post или .comment} - повторное использование 75%
• layout.css: правила на основе шаблонов {#hd, #bd, #ft, #homePage и т.д.} - почти без повторного использования
• color.css: все правила цвета, в сочетании - повторное использование 50%
• type.css: все правила типа, объединенные - 75% повторное использование (у текстового стиля меньше вариаций)
• это разделение также позволяет использовать мобильные и печатные версии для листов макета, все они управляются с помощью @import через таблицу стилей, которую я связываю с html.

Я использую это для сайта среднего размера. Для дополнительной организации я сохраняю каждый раздел в основном тем же {оберткой, общим, уникальным и т.д.}. Я также помещаю свои селекторы и свойства, а также отступы их в зависимости от зависимостей внутри одной и той же группы селекторов, поэтому я знаю, какие правила я ссылаюсь или расширяю. Эта структура позволяет почти бесконечное расширение, сохраняя организованные, понятные и многоразовые вещи. Мне пришлось реорганизовать 7000+ файл master.css месяц назад, так что это новая система, которую я пытаюсь выполнить. Я обнаружил, что 100% контент-семантический CSS не такой масштабируемый и понятный, как семантический/макетный гибрид, так как это то, что CSS используется в любом случае.

1.25-yr-later-edit. Еще один способ, который может быть более уместным, - просто использовать хороший текстовый редактор CSS. Я уверен, что VS - это дерьмо для работы с CSS, если только вы не встречаетесь с некоторыми расширениями. Если вы находитесь в окнах, дайте E Text Editor выстрел, b/c это порт TextMate Windows и имеет пакеты, предназначенные для CSS и разметки которые дают вам гораздо лучшее выделение синтаксиса и автозаполнение. То, что вы тогда можете сделать, это организовать, даже таблицу стилей 8000 строк, в складные складки:

/** Start Module 1 */
[css]
/* End Module 1 **/

И используйте список символов, чтобы отобразить для вас быстрый TOC "на лету" с запросом типа Start или Module 1 Он также индексирует строки с помощью /** these types of comments **/ (отлично подходит для областей тегов) и всех цепочек селекторов CSS. У вас не должно быть никаких проблем с работой с отдельными большими файлами с E. Кроме того, если вы постепенно не улучшаете свой CSS, все равно все равно получится. Я также хотел бы сделать так, чтобы ваш CSS CSS несколько имитировал структуру раздела DOM, на которое он ссылается.

.container {}
    .container .inner {}
        .container .head {}
    .container .inner.alt {}

В противном случае я согласен с методом "1 Base CSS и 1 Page/Section CSS", хотя он полностью зависит от ваших бизнес-требований.

Ответ 5

Я бы посмотрел YUI CSS. Возможно, это не тот ответ, который вы искали, но YUI CSS удаляет большую часть проблем с помощью разных браузеров и т.д.

Ответ 6

Разработайте несколько простых правил, которые работают для вас (или вашей компании).

Разделите свой CSS на отдельные файлы, например:

layout.css
content.css
menu.css
typography.css

Определите, какие объявления будут отображаться в каждом файле, например:

font-weight, text-decoration, font-family

и

h1, h2, h3, h4, h5, h6, a, p, li

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

Если ваши наборы объявлений становятся громоздкими, некоторым людям нравится организовывать их в алфавитном порядке.

Отметьте свой css, например:

#logo h1 {text-indent: -9999px}
     #logo h1 a {display: block; width: 200px; height: 98px; backround...}

Прокомментируйте свой CSS, включая ссылки на другие файлы, если там находится другое правило для этого конкретного селектора.

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

Убедитесь, что каждый разработчик хорошо осведомлен о вашем стандарте для CSS.

Кроме того, несколько уместно, мне только что сообщили о плагине Firefox для поиска ненужных селекторов. Он называется Селекторы пылесоса.

Ответ 7

netadictos делает несколько хороших моментов, и я согласен. Легко искать причины для большего количества Css, но преимущества сохранения их мяса намного более долгосрочны.

Кроме того, вы рассматривали использование тем и файлов скинов в asp.net? Комбинация .css и .skin может значительно уменьшить общий размер вашего Css, что незначительно хорошо для производительности, но очень хорошо для упрощения администрирования.

Некоторые исключения могут содержаться в одном файле css, но если вещи радикально различаются внутри одного, тогда вы можете рассмотреть отдельный CSS или даже отдельный сайт, если они отличаются друг от друга. Очевидно, что вы можете загружать разные версии тем в зависимости от того, какой пользователь он есть. Здесь вы можете взломать файлы Css. То есть, скажем, у вас есть css для каждой страницы, а затем вы хотели иметь разные для разных клиентов на своем сайте, тогда вы будете расти экспоненциально. Это, конечно, предполагает, что у вас есть эта проблема.

Ответ 8

Интересно то же самое в отношении файлов JavaScript. Если ваш сайт сильно зависит от Ajax до такой степени, что почти на каждой странице требуется какой-то пользовательский Javascript, то вы все это придерживаетесь?

Лучшая практика использования носителей, не имеющих javascript на странице, но как внешние файлы (как с css). Но если у вас есть файл .js на страницу, тогда все будет медленно выходить из-под контроля.

Ответ 9

Я не уверен в эквивалентах Windows, но на Mac вы можете получить CSSEdit, что позволяет добавлять папки в CSS файлы и управлять ими. Там хорошее объяснение этого в в этой статье.

Ответ 10

Глобальные файлы css вызвали у меня головные боли раньше. CSS обычно не помещается в имена, поэтому, если два разных модуля создают div с классом "box", то намерение одного перезаписывает другое. Кроме того, стили в теге [a], теге [p] и других базовых тегах (т.е. Стилях, не основанных на классах или идентификаторах) будут разрушать хаос на сторонних элементах управления, поскольку ваша глобальная таблица стилей каскадируется на компонент html, который был разработан в предположении никаких других css на странице. Неправильное использование центрирования текста по центру может привести к тяжелому отладке глобального центрирования. Поэтому я предпочитаю несколько файлов css. Я видел css-менеджеров (http-модулей, которые объединяют css вместе во время запроса), но решил, что дополнительные HTTP-запросы должны стоить ограничить объем ущерба, который, по мнению css, может сделать для моего приложения.

Ответ 11

Мы используем Ruby on Rails, поэтому у нас есть четкая контрольная/действительная пара, мы используем ее для ссылки на классы CSS и Javascript.

В частности, возьмите имя контроллера + имя действия и вставьте его в качестве идентификатора в представлении, поместите его в тег body или в свой основной контент div.

<body id="users_list_body">

Где "пользователи" - это имя контроллера, "список" - это действие. Затем в вашем CSS вам нравятся правила

#users_list_body

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

В итоге у вас есть правила, подобные этому

  #users_list_body table 
  #users_list_body table thead 

Сделайте то же самое для Javascript. Таким образом, в нижнем колонтитуле каждой страницы вы берете одну и ту же пару имени контроллера/действия и вставляете ее в вызов функции

 //javascript
 if(V.views.users_list) { V.views.user_list(); }

Затем в вашем внешнем Javascript у вас есть что-то вроде

V = {};
V.views = {};
V.views.user_list = function() {
  //any code you want to run for the Users controller / List action..
  //jQuery or something
  $('#save_button').click({ ... });
}

при этом весь ваш код Javascript привязан к определенной функции, он заканчивается тем, что все инкапсулируется. Затем вы можете объединить все ваши файлы Javascript в один, сжать и затем обслуживать его как один файл, и никакая ваша логика не будет конфликтовать. Одна страница JS не будет конфликтовать с какой-либо другой страницей JS, потому что каждая страница ограничена ее именем метода.

Ответ 12

Независимо от вашего выбора, избегать использования директивы @import.

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

Ответ 13

Вот что я делаю: я держу свои таблицы стилей отдельно, несколько в соответствии с тем, что предложили другие. Однако у меня есть script, который объединяет их вместе, минимизирует их, добавляет заголовки и затем gzips их. Полученный файл затем используется как таблица стилей, и если он выходит за пределы срока годности, он автоматически перекомпилируется. Я делаю это на общей основе для всех распространенных файлов, а затем также на основе страницы для CSS, которые будут отображаться только на этой странице. В лучшем случае у меня будет только 2 CSS файла, которые будут нажиматься на каждую страницу, и они будут сжаты, что минимизирует время и размер загрузки и количество запросов страниц, но мне все же будет полезно отделить их любым способом меня. Та же стратегия также может использоваться для JavaScript.