Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Property Order
.selector {
/* Preprocessor variables */
@box-size(20px);
@graident(@main_blue, 2px);
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Background */
background-image: url(/static/img/icon/bullet.png);
border: 10px solid #333;
/* Radius */
border-radius: 2px 2px 0px 0px;
text-shadow: 1px 1px #333;
/* Other & Vendor Prefixes */
cursor: pointer;
-webkit-box-shadow: inset 0 0 1px 1px #eee;
-moz-box-shadow: inset 0 0 1px 1px #eee;
box-shadow: inset 0 0 1px 1px #eee;
}
@jasonsee
Copy link
Author

jasonsee commented Jul 27, 2016

Property Order

  • Preprocessor variables
  • display
  • position
  • color
  • font
  • background & border
  • border-radius & text-shadow
  • any other visual elements and vendor prefixes

@thethp
Copy link

thethp commented Jul 27, 2016

line 4: gradient <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment