A look at what it means to create CSS using a state-based approach.
State-baseddesign
View Slide
.layout_1_2 #blogList .pageitem .statusBar {}.layout_1_2 #blogList .pageitem .statusBar .status,#blogList .pageitem .statusBar .status .status1 { }.layout_1_2 #blogList .pageitem .statusBar .status { }.layout_1_2 #blogList .pageitem .statusBar .status .status1 { }.layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }.layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
#nav-header ul li {float: left;}#nav-content ul li {float: left;}
#comments .comment .meta .authorname {}#comments .comment .meta .commentnumber a {}
CSS is easy.
li { }
oat: leftpadding: 3px 50px;margin: 0;
.block { display:block !important; }.inline { display:inline !important; }.hide { display:none !important; }.s-none { margin:0 !important; }.s { margin:10px !important; }.ss { margin:20px !important; }.sr { margin-right:10px !important; }.p-none { padding:0 !important; }.p { padding:10px !important; }.pp { padding:20px !important; }.pt { padding-top:10px !important; }.w-auto { width:auto !important; }
What does it mean?
Shift your thinking
Don’t code CSS for a page.Code it fora system.
Think Modularly.
Scalable and ModularArchitecture for CSS
What is SMACSS?
Have your CSS...Do one thingand one thing only
Your code should...Be clear regardlessof context
CategorizationNaming Convention
Categorization
Base
html {background-color: #FFF;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}body {margin: 0;padding: 0;}h1, h2, h3 {margin: 1em 0;}
Layout
Sidebar ContentHeader
Module
Customized ListButtonTabs
Sub-modules
LargeSearchDarkSmall
Theme
State?
State-based Design• Class-based states• Attribute-based states• Pseudo-class states• Media query states
Class-based State
Active State Default StateDisabled State Default State
.is-btn-active {box-shadow: inset 3px 3px 5px #333;}.is-btn-disabled {opacity: .5;pointer-events: none;}
/* general class-based state */.is-hidden {}
$('.btn').on('mousedown', function(){$(this).addClass('is-btn-pressed');});$('.btn').on('mouseup', function(){$(this).removeClass('is-btn-pressed');});
Attribute SelectorState
.btn[data-state=default] { color: #333; }.btn[data-state=pressed] { color: #000; }.btn[data-state=disabled] {opacity: .5; pointer-events: none; }state="disabled">Disabled
// bind a click handler to each button$(".btn").on("click", function(){// change the state to pressed$(this).attr('data-state', 'pressed');});
Pseudo-class State
/* Pseudo-class state */.callout:hover {}.callout:focus {}
:hover:focus:active:checked:indeterminate:valid:invalid:in-range:out-of-range
Media Query State
@media screen and (max-width: 400px) {.layout-content { float: none; }}
/* default state for nav items */.nav > li {float: none;}/* alternate state for nav items on largerscreens */@media screen and (min-width: 400px) {.nav > li { float: left; }}
/* default layout */.l-content { float: left; width: 75%; }.l-sidebar { float: right; width: 25%; }/* alternate state for layout on smallscreens */@media screen and (max-width: 400px) {.l-content, .l-sidebar {float: none;width: auto;}}
Examples
http://icefox.net/anigma/
http://my-html-codes.com/HTML5_tutorials/Dino_pairs2/index.html
.input-option {display: none;}/* Pseudo-class state */input:checked ~ .input-option {display: block;}
Other?Please specify:label>
Sprite Animations
#sprite {width:64px;height:64px;background:url(sprite.png) 0 0;}
@-webkit-keyframes walking {0%! ! { background-position: 448px 0; }}
.is-walking {-webkit-animation-duration:600ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:steps(7,end);-webkit-animation-name:walking;-webkit-animation-fill-mode: both;}.is-walking-faster {-webkit-animation-duration:400ms;}.is-walking-backwards {-webkit-animation-direction: reverse;}
var el=document.getElementById('sprite')
el.classList.toggle('is-walking');
toggle('is-walking');toggle('is-walking-faster');toggle('is-walking-backwards');
CSS Panichttp://snk.ms/15
.enemys {z-index:3;position:absolute;top:0px;left:0;width:49px;height:93px;display:block;-webkit-appearance: button;-moz-appearance: button;background-position:0px 0px;background-repeat:no-repeat;-webkit-animation-iteration-count:infinitecursor:pointer;opacity:0.9;border:none;
.enemys:checked{overflow:hidden;-webkit-animation-name: none;-webkit-pointer-events: none;pointer-events: none;opacity:0;}
GET SMACKEDhttp://smacss.com/