// Css Heirarchy
.my-object {
/* 1 */
@extend .their-object; // {}
/* 2 */
// Content (used with :before, :after pseudo-elements)
content: '';
// Positioning
position: relative;
top: 0;
left: 40px;
z-index: $z_menus;
// Display, visibility, overflow
display: block;
visibility: hidden;
overflow: hidden;
// Floating and clearing
float: left;
clear: both;
@include clearfix;
// Box model
@include box-sizing(border-box);
width: 960px;
margin: 0 auto;
padding: 20px 0;
border: 1px solid $pal_gold;
@include border-radius(10px);
@include box-shadow(#000, 2px 2px 10px);
// Background properties (shorthand or expanded)
background: #bada55 0 0 no-repeat;
// Typography & rhythm
@include sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #000;
text-align: right;
text-transform: uppercase;
text-shadow: rgba($pal_red, 0.5);
// All the other properties
list-style: none;
// Transitions
@include transition(
opacity .2s linear,
top .2s ease-out
);
/* 3 */
*zoom: 1;
/* 4 */
&:hover {
text-decoration: underline;
}
&:first-child { ... }
&:before {
content: '';
...
}
/* 5 */
& > li { ... }
& + ul { ... }
/* 6 */
.something {
background-image: image-url('rainbows.png');
time { font-style: italic; }
}
h1 { ... }
/* 7 */
@include respond(64em) {
...
}
}
.module-name
.module-name__sub-object
.module-name--modifier
.module-name__sub-object--modifier
.l-layout-rule
.l-layout-rule__sub-object
.l-layout-rule--modifier
.l-layout-rule__sub-object--modifier
.is-state
.end-fade
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.