分享
 
 
 

CSS:快速提升设计可读性和维护性-css设计

王朝数码·作者佚名  2009-07-14
窄屏简体版  字體: |||超大  

设计漂亮的样式表是一门艺术

设计漂亮的样式表不是一门暗黑艺术(如果用艺术家的眼光来看待这门艺术的话,那更多表现的是种对幸福的生活渴望和完美人生的追求. PS: 这是译者找到的最靠谱的解释.). 它需要持久的练习和全身心的投入, 但是, 有一些小窍门来帮你快速提升, 让你也成为一个CSS高手.

再接下来的文章里,我会演示一些自己在设计可读性强, 维护性强, 并容易调试的样式表时用到的技术.

文件的命名惯例

在所有的项目中我都遵循一种简单的命名习惯. 这是一种简单而有效的办法来维护CSS文件. 有很多设计师会给样式表起一些模糊的名字, 比如main.css, 或者style.css. 我觉得文件名可以更细致一点, 这样的话, 你可以很快的知道每个文件是做什么的.

这是我的一个客户的网站文件结构.

CSS 命名惯例

style_all.css

包含重置和一些适用于各个浏览器和操作系统的CSS代码. 而且最好把那些用内容管理系统中所见即所得编辑器生成的内容的样式放在这个文件里, 比如链接的颜色和元素的样式等等.

style_screen.css

这是包含整体样式的主文件. 一会儿我们会深入了解它.

style_screen_IE7.css

特别为IE7准备的样式表. 我做过的大多数项目不需要特别准备一个IE7的样式表, 这里只是让大家更加理解我所说的命名惯例.

style_screen_It-IE7.css

这是兼容所有IE7以下版本浏览器的样式表.

style_print.css

当你去掉所有图片, 仅仅显示好看而整洁的文字时就会用到这个用于打印的样式表.

这个命名惯例很复杂. 比如你要专门为IE6准备一个样式表, 就可以命名为style_screen_IE6.css. 如果是针对便携设备, 就可以命名为style_handheld.css, 如此等等.

我在开发的商业内容管理系统, 有这样一个功能就是检查样式表文件并自动使用适当的条件注释. 将来我也许会发布那部分代码(如果我能说服项目经理的话:P)

模块化

现在让我们深入探讨一下主样式表style_screen.css. 这个文件将来会变得很大, 所以把样式划分成一部分一部分是非常重要的.

我会在样式表的开头声明划分成哪几部分.

将CSS文件划分成许多部分

提示: 按ctrl+F(或者 Mac+F), 输入 =FORMS 就能直接跳转到表单样式的部分. 我发现这样特别节省时间.

定位

规定布局的结构, 定位基本的元素. 把页面分成头部, 内容部分, 侧边栏, 和页脚. 在开发一个新页面时, 首先要做的是把整体的框架搭建起来, 而不要先考虑细节.

先定义基本的样式结构排版

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

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

布局设计

既然已经解决了定位和排版, 你现在就要把精力放在页面设计上了.

如果这部分太长的话, 以后可以把它们划分成更小的部分. 适当缩进, 保持代码的层次感对维护样式表很有帮助.

其他部分

通常我会把表单, 内容管理系统代码等单独分出来. 根据需要, 把自己项目的样式单独分成一部分.

一旦需要调试或者修改从前项目的时候, 模块化代码的优点就很明显了. 浏览代码, 并找到所需的代码就变得容易很多.

缩进和层级

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

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

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

总结

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有