css架构

http://blog.jobbole.com/31147/

1. 良好的css架构

可预测

可重用

可扩展

可维护

2. 一些不好的写法

某一元素大部分是一样的,只有一个页面不同,应该为此页面找出不同点,然后写一个新规则去处理

基于父组件来修改组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.widget {     background : yellow;     border : 1px solid black ;     color : black ;     width : 50% ;  }    #sidebar .widget {     width : 200px ;  }    body.homepage .widget {     background : white ;  }

这样的写法是不好的,上面的每一条准则都用不上,

开放封闭原则: 对继承开放,对修改封闭

过于复杂的选择器

过于通用的类名

应该避免,以免被别处的定义影响

一个规则做太多的事儿

3. 最佳实践

专注

1 2 3 4 5

/* Grenade */ #main-nav ul li ul { }    /* Sniper Rifle */ .subnav { }

第一个就很容易用在不想用的样式上

而用subnav就没有机会了

模块化

一个组织结构良好的组件层可以帮助解决HTML架构与CSS那种松散的耦合性。此外，CSS组件本身应该是模块化的。组件应该知道如何进行样式和更好地工作，但是关于布局、定位以及它们与周围元素的关系不应该做太多的假设。(组件对这些东西不能有太多的耦合)

一般而言，CSS要定义的应该是组件的外观，而不是布局或者位置。同样在使用background、color和font这些属性时也要遵循原则(????)使用。

布局和位置应当由一个单独的布局类或者单独的容器元素构成（请记住，有效地把内容与展示进行分离其实就是把内容与容器进行分离）。

给类进行命名空间

1 2 3 4 5 6 7

/* High risk of style cross-contamination */ .widget { }  .widget .title { }    /* Low risk of style cross-contamination */ .widget { }  .widget-title { }

创建修饰符类来扩展类

1 2 3 4 5 6 7

/* Bad */ .widget { }  #sidebar .widget { }    /* Good */ .widget { }  .widget-sidebar { }

把css组织成逻辑结构

Jonathan Snook在其非常优秀的《SMACSS》书中提到，CSS可以被分成四个不同的类：基础（base）、布局（layout）、模块（modules）和状态（state）。基础包括了复位原则和元素缺省值；布局是对站点范围内的元素进行定位以及像网格系统那样作为一种通用布局助手；模块即是可重用的视觉元素；状态即指样式，可以通过JavaScript进行开启或关闭。

组件是一个独立的视觉元素。模板在另一方面则是构建块。模板很少独自站在自己的角度去描述视觉和感觉，相反，它们是单一的、可重用的模式，可以放在一起形成组件。

为了提供更详细的例子，一个组件可能就是一个模式对话框。该模式可能在头部包含渐变的网站签名、或者在周围会有阴影、在右上角会有关闭按钮、位置固定在垂直与水平线中间。这四个模式可能被网站重复多次使用，所以在每次使用的时候，你都很少会想到重新编码与设计。这些所有的模板即形成了一个模块组件。

因样式和风格使用类

有逻辑地命名类

工具