Как должны быть упорядочены внешние таблицы стилей CSS?

Таблицы стилей, которые я поместил в проект в порядке возрастания, выглядят следующим образом:

  1. Эрик Майер "reset.css"
  2. 'Bootstrap.css'
  3. 'Самозагрузка-theme.css'
  4. 'JQueryMobile.css'
  5. Мой кастом 'style.css'
  6. 'media.css' (медиа-запросы для адаптивных макетов).

Есть ли какое-то правило или более правильный способ упорядочить их, чтобы потом не возникало конфликтов? Пожалуйста помоги!

Источник

3 ответа

Решение

Так как точка "каскадных" таблиц стилей, применяющих вещи последовательно, уже была поднята, я не буду подробно останавливаться на этом. Просто помните, что стили могут быть перезаписаны одним и тем же свойством, если они найдены в другой таблице стилей под ней (то есть во второй таблице стилей может быть что-то перезаписывает что-то в первой, но не наоборот). Однако это также относится к свойствам в той же таблице стилей. если p{font-size:1em;} на первой линии, и p{font-size:2em;} на второй строке, то размер шрифта будет 2em.

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

Источник

Поскольку определения CSS переопределяются при создании новых определений, я бы предложил сначала поместить все файлы css из внешних источников (таких как jQuery, bootstrap и т. Д.) (Вверху).

Таким образом, вы можете легко переопределить теги CSS в ваших пользовательских файлах CSS.

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

Надеюсь это поможет!

Источник

Это зависит от того, в каком порядке вы хотите, чтобы ваш CSS выполнялся.

Тот, который вы поставите первым, будет загружен и исполнен первым.... Поэтому, когда вы ставите reset во-первых, все теги будут возвращены к их поведению по умолчанию

Если вы хотите, чтобы ваш пользовательский стиль был загружен в первую очередь, поместите его над всеми остальными css (даже выше, чем сброс)... но имейте в виду, что последний найденный стиль для любого общего тега будет реализован, если нет класса для тот tag Вы были названы в вашей разметке явно вами!!

Например,

если у вас есть:

<ul>
  <li> blah 1</li>
  <li> blah 2</li>
  <li> blah 3</li>
  <li> blah 4</li>
  <li> blah 5</li>
</ul>

затем, предполагая, что в вашем собственном CSS, вы установили

ul{padding:10px}

и вы вызываете его после перезагрузки, тогда это заполнение будет применено, но если вы вызывали свой CSS раньше reset.css, затем <ul> будет сброшен по умолчанию!:)

Это был бы заказ для меня:

  • "Reset.css" Эрика Мейера (сначала сбросьте все)
  • Мой пользовательский файл 'style.css' (определить браузер dimesnion и вызвать соответствующий css)
  • media.css ((медиа-запросы для адаптивных макетов).)
  • bootstrap.css (выполнить все остальные CSS)
  • jQueryMobile.css (* поддержка bootstrap.css после загрузки *)
  • bootstrap-theme.css (themese может быть последним всегда)
Источник
Другие вопросы по тегам