css实践

css实践.rtf

分离 用于展示效果的 css className 和 javascript 用来绑定或附加效果的 css className

css 命名:
prefixName-block-element--modifier

e.g.
qm-header-title
qm-header-title--highLight
qm-header-navList


BEM  naming convention:
Just because something happens to live inside a block it doesn’t always mean is is actually a BEM element.
Good guide to use BEM: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

oocss: http://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/


BEM naming convention:
https://en.bem.info/method/naming-convention/

We use:
"Sans underscore" style

blockName-elemName--modName--modVal

Names are written in CamelCase.
An element name is separated from a block name by a single hyphen (-).
Modifiers are delimited by double hyphens (--).
The value of a modifier is separated from its name by a double hyphen (--).


Sass is better than less:
Easy to write, learn, understanding, more like writing program logic.
Document well.
Robuster third part library(compass, bourbon)

Understand sass:
@mixin mixinName(arguments)   , use:  @include mixinName(arguments)   , outpus stylesheets
@function funName(arguments)  , use:  funName(arguments)              , @return some values
@extend   has all styles of another className defined, like one wants to extend another


The Inception Rule: don’t go more than four levels deep.

IE's limilation of css

scss @mixin vs. @extend   http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
use @extend to share traits among explicitly related rulesets.