Рекомендация: как правильно использовать (повторять) атрибуты стиля CSS?

Question

Как новичку в CSS, мне интересно, рекомендуют ли профессионалы повторять определенные атрибуты стиля и их не унаследованные, а свойства по умолчанию для каждого соответствующего селектора? Например, стоит ли мне использовать

body {background:transparent none no-repeat; border:0 none transparent; margin:0; padding:0;}
img {background:transparent none no-repeat; border:0 none transparent; margin:0; outline:transparent none 0; padding:0;}
div#someID {background:transparent none no-repeat; border:0 none; margin:0 auto; padding:0; text-align:left; width:720px; ...}

или

body {background:transparent; border:0; margin:0; padding:0;}
img {background:transparent; border:0; margin:0; outline:0; padding:0;}
div#someID {background:transparent; border:0; margin:0 auto; padding:0; text-align:left; width:720px; ...}

или только то, что (я думаю) мне действительно нужно

body {background:transparent; margin:0; padding:0;}
img {border:0; outline:0;}
div#someID {margin:0 auto; width:720px; ...}

Если лучше следовать первому или второму, что вы думаете об определении класса, подобного

.foo {background:transparent; border:0; margin:0; padding:0;}

, а затем применить его к каждому соответствующему селектору:

<div id="someID" class="foo">...</div>

Да, теперь я в полном замешательстве ... поэтому, пожалуйста, посоветуйте! Спасибо!

Answer 1

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

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

Не все значения по умолчанию для таблиц стилей браузера являются надежными, поэтому люди используют сброс CSS. (Хотя лично я считаю, что большинство из них слишком тяжеловесны и навязчивы. Большинство современных браузеров соглашаются с важными вещами, требуя всего лишь несколько подсказок тут и там, чтобы исправить определенные больные моменты. Затраты на установку десятка правил, таких как margin: 0 на каждый элемент в документе только кажется чрезмерным.)

Многие свойства в вашем примере в любом случае являются начальными значениями и / или значениями таблицы стилей по умолчанию, поэтому вы ничего не получите, включив их. (border-width: 0 технически не является начальным значением, но поскольку border-style: none есть, вы не заметите разницы.) Ваши правила будут намного легче справляться с минимальным написанным:

body { margin: 0; }
#someID { width: 720px; margin: 0 auto; }

что вы думаете об определении класса, подобного

.foo {background:transparent; border:0; margin:0; padding:0;}

Ну, это зависит от foo. Если у вас есть много элементов на странице, которые представляют одну и ту же вещь, вы, безусловно, должны пометить их class и оформить их одинаково.

Но если вы просто хотите применить некоторые стили к загрузке несвязанных элементов, вам следует настроить таргетинг на них отдельно (используя , в селекторе). Не загрязняйте разметку контента проблемами стиля, добавляя фиктивные классы, такие как class="red_thing big_border".

Как бы то ни было, с теми правилами, которые являются значениями по умолчанию для большинства элементов, включая <div>, .foo, в любом случае было бы бесполезным.

Answer 2

В наши дни очень распространено использование так называемого «CSS Reset». По сути, это просто куча CSS, которую вы помещаете в верхнюю часть ваших объявлений, которая сбрасывает все стили в общую базу. Идея состоит в том, чтобы сгладить любые различия между стилями по умолчанию различных браузеров. Оттуда вы можете быть чуть более уверены, что получите то, что хотите от CSS. Одним из наиболее популярных из них является CSS Reset Эрика Мейера .

Answer 3

Всегда используйте:

border:0;

над

border:0 none transparent;

Если подумать, что если ширина границы равна 0 (то есть, нет), то какой смысл использовать для определения стиля и цвета границы, поскольку граница даже не будет отображаться. (То же самое относится и к фону и другим свойствам)

А также, я бы пошел с

.foo {background:transparent; border:0; margin:0; padding:0;}

Лучше применять стили CSS ко всем элементам с классом «foo», а не повторять один и тот же код CSS для «someID», «someID2», «someID3» и т. Д.

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