Соглашение об упорядочении атрибутов блочной модели CSS - PullRequest
3 голосов
/ 09 февраля 2011

Если вы когда-нибудь задумывались, в каком порядке вводить свои атрибуты CSS, такие как border, padding, font-family и т. Д. Два общих подхода выглядят как алфавитный и блочный. (Увидеть: Обычный порядок свойств CSS )

Это не следует путать с селекторами (#id, .class, :hover, tagname), в этом случае порядок имеет большое значение.

Алфавитный вариант не имеет особого смысла для меня. С одной стороны, он вставляет padding и line-height в середине width и height или left и top.

Я опубликую ответ CW со списком от fordinteractive.com , предоставленным jacobangel .

Это очень хорошо, но не полностью. Есть несколько предметов, пропавших без вести. Я надеюсь выяснить, куда исчезают пропавшие, например font-style и clip.

Куда эти новые должны попасть в список? Есть ли другие, которые отсутствуют? Если уже было предложение о том же, проголосуйте за этот комментарий, чтобы показать, что вы думаете, что это хорошая идея. Также, вероятно, будет больше, чего не хватает. Я надеюсь, что это будет полный список. Также было бы неплохо, если бы существовал инструмент или функция IDE, которая сортировала бы по этому списку.

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

Ответы [ 2 ]

5 голосов
/ 09 февраля 2011

Условное обозначение модели коробки скопировано с http://fordinteractive.com/tools/propertyorder/propertyorder.css.

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

display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;

outline: ;

list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;

opacity: ;

cursor: ;

content: ;
quotes: ;
  • Куда clip идти?
  • Куда user-select идти? (не поддерживается кроме Mozilla с -moz-user-select и Chrome с -webkit-user-select. IE использует JavaScript onselectstart)
  • Куда border-radius идти? (не поддерживается кроме Mozilla с -moz-border-radius и Chrome с -webkit-border-radius)

Пожалуйста, прокомментируйте, если у вас есть предложение относительно того, куда что-то должно идти.

0 голосов
/ 22 ноября 2013

Имеет смысл:

  • Сгруппируйте свойства с похожими функциями (например, height и width или clear и float), потому что если мы меняем значение одного свойства, мы часто меняем значение других свойств в группе.
  • Упорядочить группы свойств так, чтобы они находились в последовательности принятия решения. Например, position до float, потому что если я выберу position: absolute, float не будет иметь значения.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...