@extend @mixin,e.g.clearfix
position z-index top bottom left right Flexbox properties float clear
4️⃣ DISPLAY AND VISIBILITY
display opacity transform
7️⃣ BOX MODEL (FROM OUTSIDE IN)
margin box-shadow border border-radius box-sizing width height padding
font-size line-height font-family font-weight font-style text-align text-transform word-spacing color
🔟 PSEUDO-CLASSES & PSEUDO-ELEMENTS (NESTED RULES)
:hover :focis :active :before :after :first-child :last-child
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}