Skip to content

Instantly share code, notes, and snippets.

@iods
Created July 7, 2016 01:40
Show Gist options
  • Save iods/61d0fd8db292266eaa3b793189c627d1 to your computer and use it in GitHub Desktop.
Save iods/61d0fd8db292266eaa3b793189c627d1 to your computer and use it in GitHub Desktop.
My CSS declaration order
/** -------------------------------------------------------------------------- *\
* Version 0.1.0 [2016-07-04]
*
* Identifies the proper way for declaring the order of CSS properties
*
* Project : Acuity
* Markup : order.css
* Author : Rye Miller <rye@drkstr.io>
* Version : 0.1.0
* Created : 2016-07-04
* License : GPLv3
* License URL : https://www.gnu.org/licenses/gpl-3.0.html
*
* Website: http://ryemiller.com
* Copyright: (c) 2016 Rye Miller
*
* --------------------------------------------------------------------------- *
* TABLE OF CONTENTS *
* --------------------------------------------------------------------------- *
*
* ORDER
* [1].....Content
* [2].....Positioning
* [3].....Display
* [4].....Overflow
* [5].....Animations
* [6].....Box Model
* [7].....Background
* [8].....Typographic
* [9].....Other
* [10]....Pseudo-*
*
* RESOURCES
* - http://markdotto.com/2011/11/29/css-property-order/
* - https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style.css
* - https://gist.github.com/awkale/ad46e2ade70e833fa178
* - https://gist.github.com/fiskus/3426801
* - https://gist.github.com/simurai/40902209f695b2d080e1
* - https://gist.github.com/erikjung/5249484
* - https://gist.github.com/joshuapekera/4582549
*/
.selector {
/* --------------------------------------------- *
* ORDER @content
* --------------------------------------------- *
*
* NOTE: Does the quotes property need to come
* at the beginning since content will
* place them there as a value anyway?
*
* TODO Research usage of quotes placement
*/
content: normal;
quotes: '\201C' '\201D' '\2018' '\2019';
/* --------------------------------------------- *
* ORDER @positioning
* --------------------------------------------- *
*
* NOTE: flex property is also included in this
* section and follows the property for
* a `left` positioning value.
*/
position: static;
z-index: auto;
top: auto;
bottom: auto;
left: auto;
right: auto;
float: none;
clear: none;
/* --------------------------------------*
* ORDER @display
* -------------------------------------*/
display: inline;
visibility: visible;
opacity: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
transform-style: flat;
/* --------------------------------------*
* ORDER @overflow
* -------------------------------------*/
overflow: visible;
overflow-x: visible;
overflow-y: visible;
clip: auto;
/* --------------------------------------*
* ORDER @animations
* -------------------------------------*/
animation: none;
animation-delay: 0;
animation-direction: normal;
animation-duration: 0;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
transition-delay: 0s;
transition-duration: 0s;
transition-property: none;
transition-timing-function: ease;
/* --------------------------------------*
* ORDER @box-model
* -------------------------------------*/
margin: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
outline: none;
outline-width: medium;
outline-style: dotted;
outline-color: #C0C0C0;
outline-offset: 100px;
border: 0;
border-style: none;
border-width: medium;
border-color: inherit;
border-collapse: separate;
border-image: none;
border-spacing: 0;
border-bottom: 0;
border-bottom-color: inherit;
border-bottom-style: none;
border-bottom-width: medium;
border-left: 0;
border-left-color: inherit;
border-left-style: none;
border-left-width: medium;
border-right: 0;
border-right-color: inherit;
border-right-style: none;
border-right-width: medium;
border-top: 0;
border-top-color: inherit;
border-top-style: none;
border-top-width: medium;
border-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
box-sizing: content-box;
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
max-height: none;
padding: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
/* --------------------------------------*
* ORDER @background
* -------------------------------------*/
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image: -webkit-linear-gradient(top, #000, #fff);
background-image: -moz-linear-gradient(top, #000, #fff);
background-image: -ms-linear-gradient(top, #000, #fff);
background-image: -o-linear-gradient(top, #000, #fff);
background-image: linear-gradient(top, #000, #fff);
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
/* --------------------------------------*
* ORDER @typographic
* -------------------------------------*/
font-size: 100%;
line-height: inherit;
font-family: sans-serif;
-moz-osx-font-smoothing: inherit;
-webkit-font-smoothing: none;
font-style: inherit;
font-weight: 400;
hyphens: none;
word-spacing: inherit;
letter-spacing: 1px;
color: #333333;
text-align: center;
text-decoration: none;
text-indent: each-line;
text-overflow: clip;
text-rendering: auto;
text-shadow : none;
text-transform: none;
word-break: normal;
word-wrap: normal;
white-space: inherit;
vertical-align: baseline;
list-style: none;
list-style-type: disc;
list-style-position: outside;
list-style-image: none;
pointer-events: auto;
cursor: pointer;
/* --------------------------------------*
* ORDER @other
* -------------------------------------*/
filter: inherit;
size: 0;
zoom: normal;
caption-side: top;
table-layout: auto;
empty-cells: show;
backface-visibility: visible;
resize: none;
-webkit-appearance: inherit;
-moz-appearance: inherit;
-webkit-user-select: inherit;
-moz-user-select: inherit;
-ms-user-select: inherit;
-ms-interpolation-mode: inherit;
direction: ltr;
marks: none;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
unicode-bidi : normal;
/* --------------------------------------*
* ORDER @pseudo
* -------------------------------------*/
:hover,
:focus,
:active,
:before,
:after,
:first-child,
:last-child
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment