排版

排版包括定义全局和所有常见元素的字体. 定义那些会控制内容的元素的字体, 比如页头, 段落样式, 列表, 引用等等.

把字体定义从布局样式里面划分出来

布局设计

既然已经解决了定位和排版, 你现在就要把精力放在页面设计上了.
如果这部分太长的话, 以后可以把它们划分成更小的部分. 适当缩进, 保持代码的层次感对维护样式表很有帮助.

其他部分

通常我会把表单, 内容管理系统代码等单独分出来. 根据需要, 把自己项目的样式单独分成一部分.
一旦需要调试或者修改从前项目的时候, 模块化代码的优点就很明显了. 浏览代码, 并找到所需的代码就变得容易很多.

缩进和层级

最高级别的元素缩进最少. 它的下一级元素缩进一次. 再下一级缩进两次, 以此类推.

适当缩进并保持父级子级的层级结构

这样做不仅美观而且可读性强, 同时可以更容易的锁定问题. 大量的空格的确会使文件变大, 但你总是可以在发布之前压缩CSS文件.
比如, 页面上的搜索框出了问题. 而代码必须在布局部分里, 写在父级侧边栏样式的下面. 如果有适当的模块化和缩进, 你会发现找到你需要的代码是多么容易的事情.

对属性加以分类, 而不是按照字母序排列

有的设计师觉得把CSS属性按字母序排列是一个比较有效的方法, 因为这样容易维护. 但我不太同意. 我觉得用以CSS属性的类型来排列会更有效.


.selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;

padding: 10px;
margin: 5px;

background: #000;
border: 1px solid #222;
}

在上面的例子中, 属性的划分是按照: 控制内容的, 控制间距的, 以及块级元素的可视化(背景和边缘)这些类型划分的.
如果它们是按照字母序排列的, 就是下面这样:

.selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}

很显然, CSS的可读性大大降低了. 我通常先写布局相关的属性, 接着是内容属性, 然后是间距和其他属性.

总结
其实以上这些并不复杂. 这些简单的事情可以帮助前端开发者随时保持清晰的思路. 漂亮的样式表是禅意开发的第一步.

上一页  [1] [2]