CSS教程：快速提升设计可读性和维护性

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

用等等.

Separate Font Definitions from layout styles

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

布局设计

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

其他部分

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

缩进和层级

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

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

这样做不仅美观而且可读性强, 同时可以更容易的锁定问题. 大量的空格的确会使文件变大, 但你总是可以在发布之前压缩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的可读性大大降低了. 我通常先写布局相关的属性, 接着是内容属性, 然后是间距和其他属性.

总结

其实以上这些并不复杂. 这些简单的事情可以帮助前端开发者随时保持清晰的思路. 漂亮的样式表是禅意开发的第一步.
原文出处: http://azadcreative.com/2009/04/the-art-of-crafting-beautiful-stylesheets/

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS教程：padding属性定义边内补白下一篇: CSS教程：学习border-width属性

关于CSS教程：快速提升设计可读性和维护性的所有评论

随机推荐