解耦你的HTML CSS JS.md

要达到的效果

As with the first example, a developer working on an HTML template should be able to make basic changes to the markup without fear of it breaking essential functionality.

不要让一个class承担太多的责任

  <button class="add-item">Add to Cart</button>

这里你会用add-item作为样式的定位,同时也用它来作为JS的hook.这时候建议这么做:

  <button class="js-add-to-cart add-item">Add to Cart</button>

使用js调整样式的建议

使用易辨认的class名称来区分页面默认样式和js调整的样式来确保CSS develop在洽当的class中修改和定义样式.

  .pop-up {} // default style
  .pop-up--is--visible {} // alter the state via javascript

将注意力分散

一个组件只需要负责他的look and feel.而不关心layout和position. layout和position需要一个额外的class,或者一个额外的容器.

Namespace your classes

Orgnize Your CSS Into a Logical Structure

请参考SMACSS

Use Class For Styling and Styleing Only

下面不同性质不同的工作最好要有以区分的前缀:

js- for javascript hook
supports- for Modernize classes.
...

Name your class with a logical structure

  /*A component*/
  .button-group {}

  /*A component sub-object(or call it element of compoennt)*/
  .button__icon {}

  /*A component modifier*/
  .button--modifier-name{}

  /*sub-object modifer*/
  .component-name__sub-object--modifier-name

  /*Layout Rules*/
  .l-layout-method
  .grid

  /*State Rules*/
  .is-state-type

  /*Non-styled JavaScript Hooks*/
  .js-action-name

工具

...待续

参考文章

[CSS Architecture]http://www.readability.com/articles/hvm80ggt

democ/解耦你的HTML CSS JS.md