Home/ Questions/Q 3878232
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:35:22+00:00

If you ever wonder in what order to enter your CSS attributes like border

  • 0

If you ever wonder in what order to enter your CSS attributes like border, padding, font-family, etc. Two common approaches seem to be Alphabetical and Box Model. (See:
Conventional Order of CSS properties)

This not to be confused with selectors (#id, .class, :hover, tagname) in which case the order matters very much.

The Alphabetical option does not make much sense to me. For one thing it sticks padding and line-height in the middle of width and height or left and top.

I will post a CW answer with the list from fordinteractive.com which was provided by jacobangel.

It is very nice, but it is not complete. There are a few items missing. I hope to find out where the missing ones go like font-style and clip.

Where should these new ones go in the list? Are there any others that are missing? If there was already a suggestion for the same thing then vote for that comment to show you think it is a good idea. Also there will probably be more that are missing. I hope for this to be a complete list. It would also be a good idea if there was a tool or IDE feature that would sort by this list.

I am posting this because there does not seem to be another page that can be found on Google and the one I do know of is incomplete (not even on Google that I could find). I expect that if new ones are edited in that we will have a complete list that everyone can follow.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Box Model Convention copied from http://fordinteractive.com/tools/propertyorder/propertyorder.css.

    Additions should be edited in when they are found to be missing from the list. Please comment on where you think that additions and wait for some agreement before adding them to the final list.

    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: ;
    • Where should clip go?
    • Where should user-select go? (not supported except by Mozilla with -moz-user-select and Chrome with -webkit-user-select. IE uses JavaScript onselectstart)
    • Where should border-radius go? (not supported except by Mozilla with -moz-border-radius and Chrome with -webkit-border-radius)

    Please comment if you have a suggestion as to where something should go.

    • 0