property order

dabblet.css

/**
 * property order
 */
html{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
p {
background: rgba(100,100,100,.2);
padding: .618em;
}
.fontThenLh {
	font-size:1em;
	line-height: 1.5;
}
.lhThenFont {
line-height: 1.5;
font-size: 1em;
}
.fontThenMargin{
	font-size: 1.5em;
	margin: 2em;
}
.marginThenFont {
	margin: 2em;
	font-size:1.5em;
}
.shortHandBorderFirst {
	border: 1px solid gray;
	border-right: 1px solid orange;	
	border-bottom: 1px solid yellow;	
	border-left: 1px solid green;	
}
.shortHandBorderLast {
	border-right: 1px solid orange;
	border-bottom: 1px solid yellow;
	border-left: 1px solid green;
	border-top: 1px solid red;
	border: 1px solid gray;
}

dabblet.html

<p class="fontThenLh">
Font size first, then line-height
</p>

<p class="lhThenFont">
line-height first, then font
</p>
<p class="fontThenMargin">
Font size first, then margin
</p>
<p class="marginThenFont">
Margin, then font
</p>
<p class="shortHandBorderFirst">
Shorthand border first</p>

<p class="shortHandBorderLast">
shorthand border last
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}