您现在的位置是:网站首页> 编程资料编程资料
CSS 书写有怎样的功能_CSS教程_CSS_网页制作_
2021-09-09
853人已围观
简介 随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,CSS文件就会比较繁琐,众多的选择符、属性让人眼花缭乱,那
随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,CSS文件就会比较繁琐,众多的选择符、属性让人眼花缭乱,那么如何更快的定位、如何更高效的编写样式呢?CSS的书写被很多人所忽略。关于书写风格,翻看了一些知名网站的作品,发现横向连排几乎成为各大产品项目的主流,然而,每个人对于CSS的写法各异,这就导致我们工作效率的降低。为了更好的协同工作,保持团队内CSS书写的一致性,几经波折后达成共识,具体书写方法如下:CSS属性横排书写,选择符纵排书写,每个”,”(逗号)后必须换行;
重构组代码书写规范示例:(其中数字只用做示范,实际应用中不建议用数字命名。)
.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }
有人说,好代码就是用记事本打开也是艺术品,而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范,我们只能对两种写法做个简单的总结。
就样式文件本身对比:
纵向书写特点:
- 每个CSS属性独立一行,一般不会出现换行或横向滚动条。
- 可以通过firebug等工具查找到模块,在DW中ctrl+g行定位,修改方便。
- 属性段落间有缩进,保证了代码的整洁,层次清楚,符合编程语言代码规范,修改更加直观。
存在的问题:代码冗余(如空格符、tab符、换行符);文件大小增加;容易出现纵向滚动条。
相关内容
- 文字超过宽度显示省略号(无js全兼容) _浏览器兼容教程_CSS_网页制作_
- superLink 让伪链接更有可用性_CSS教程_CSS_网页制作_
- 广告始终定位到网页右下角 css_CSS教程_CSS_网页制作_
- CSS Sprites 图片整合技术分析_CSS教程_CSS_网页制作_
- CSS 优先级 详细分析_CSS教程_CSS_网页制作_
- 打印网页中不打印页面中的某些内容 _CSS教程_CSS_网页制作_
- 去掉点击链接时周围的虚线框outline属性 _CSS教程_CSS_网页制作_
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器_CSS布局实例_CSS_网页制作_
- CSS 教程之内容设置的一些语法_CSS教程_CSS_网页制作_
- css 不同媒介的显示样式控制方式_CSS教程_CSS_网页制作_