Очень общая структура CSS

Question

У меня есть только то, что я могу предположить, это довольно общий CSS-квест ...

Представим себе на мгновение следующее:

body{
 background-color:blue;
 color:white;
 padding:2px;
}

Давайте также предположим, что мыимейте это также:

body{     
 color:white;
 background-color:blue;
 padding:2px;
}

Имея все это в виду, есть ли какая-то конкретная структура, ориентация или правильное размещение элементов стиля CSS - относительно размещения стилей этого элемента и какой линии этот стиль долженБыть на?

Другими словами, существует ли какой-либо "Стандарт", который определяет цвет фона в этих двух примерах, должен быть первым сделанным объявлением?Или расположение стилей элементов совершенно произвольно?

Я пришел сюда, чтобы задать этот, казалось бы, тривиальный вопрос вам, мастерам мира CSS, так как я пытаюсь полностью понять CSS.Мне приходит в голову, я не могу найти какую-либо документацию, которая конкретно охватывает синтаксис CSS-относительно правильной формы письма.Кроме того, мне кажется, что если CSS обозначает Каскадную таблицу стилей, то стили, помещенные в / на элемент HTML, лучше всего будут обслуживать, если они должны поддерживать некоторую согласованность со стилем страницы / раздела / и т. Д. Вместе сHTML, верно?

Любая помощь, которую вы можете предложить, будет принята с благодарностью!

Answer 1

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

Тем не менее, вы можете использовать "! Important", чтобы переопределить элемент, у которого точность снижается в вашем файле CSS.(Если у обоих стилей есть «! Важный», более низкий снова будет иметь приоритет.)

Просто дайте мне знать, если у вас есть какие-либо вопросы.

Answer 2

В CSS нет ничего, что требовало бы, чтобы стили в одном объявлении были в каком-то определенном порядке.Имеет смысл организовать их каким-то образом, и путь зрелого человека хорош как любой.(Я обычно думаю об этом как «создать элемент, затем расположить его», то есть я переворачиваю его 1 и 2.)

Исключением является то, что вы указываете один и тот же стиль более чем одним способом длята же декларация.Если вы посмотрите на пункт 6 зрелого, он говорит, что некоторые браузеры не поймут box-shadow и поймут webkit-box-shadow.Вы должны настроить его так, чтобы браузеры, которые понимают оба, использовали box-shadow, а вы делаете это последним.Если у вас есть два одинаково определенных объявления, то будет применяться последнее, которое встречается последним.(Для получения дополнительной информации см. this .)

Answer 3

В этом случае возможен только один «стандарт» (с однозначным порядком): вы можете отсортировать свойства в алфавитном порядке , чтобы помочь себе, а другой - в быстром поиске.

ИЛИ более абстрактно: Общая логика типа « от общего к местному и менее важному ».Рекомендуется расположить свойства в следующем порядке:

1. Положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index.
2. Размер и отступ: width, height, margin, padding ..
3. Граница, она частично относится к размеру и может быть добавлена ​​к 1-му.
4. Общий дизайн: list-style-type, overflow ..
5. Цвета, шрифты и стиль дизайна: background, color, font ..
6. Свойство без префикса пишется последним.Пример: сначала: -webkit-box-shadow:0 0 100px 20px #000;, затем: box-shadow:0 0 100px 20px #000;.Это делается для того, чтобы стандартная (окончательная) реализация всегда была важнее временной реализации браузера.