gistfile1.scss

/*
	Imagine this sort of structure:
	
	<div class='person person--male person--inbred'>
		<div class='hand  hand--left  person__hand'>
			<ol>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
			</ol>
		</div>
		<div class='hand  hand--right  person__hand'>
			<ol>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
				<li class='digit digit--finger'><span class='nail nail--short'></span></li>
			</ol>
		</div>
		<div class='hand  hand--extra  person__hand'>
			<ol>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
				<li class='digit digit--finger'><span class='nail nail--long nail--ingrown'></span></li>
			</ol>
		</div>
	</div>
*/

/*
 Code the smallest, simplest objects first.
 In this case, .hand, .digit and .nail are all 
 of similar specificity and complexity
*/

.hand {
	position: absolute;
}

    .hand--left {
    	right: 100%;
    }
    
    .hand--right {
    	left: 100%;
    }
    
    .hand--extra {
    	display: none;
    	left: 50%;	
    }


.digit {
	
}
	
	.digit--finger {

	}

	.digit--toe {

	}


.nail {
	
}

	.nail--long {

	}

	.nail--short {

	}

	.nail--ingrown {

	}

/*
    .person starts to be more complex, as it will effect many sub components.
    I guess this isn't strictly OOCSS but it's OOCSS for people with deadlines :)
    
    I try to keep these modifiers to one level (not modifying heaps of sub-sub
    components!). We want to write code that's maintainable as well as 'correct', right?
*/

.person {
	position: relative;
}

	/* Sub-compoents of .person... try to keep to one level */
	.person__hand {
		position: absolute;
		top: 30%;
	}
	
	.person__leg {
		position: absolute;
		bottom: 0;
	}


/* Modifiers of .person */
    .person--male {
    	background: blue;
    }
    
    .person--female {
    	background: purple;
    	
    	.nail {
		    color: pink;
	    }
    }
    
    .person--inbred {
    	.hand--extra {
    		display: block;
    	}
    }