CSS的书写有怎样的功能

2016-02-20 00:04 1 1 收藏

下面是个超简单的CSS的书写有怎样的功能教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,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; }

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

有人说,好代码就是用记事本打开也是艺术品,而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范,我们只能对两种写法做个简单的总结。

就样式文件本身对比:

纵向书写特点:

每个CSS属性独立一行,一般不会出现换行或横向滚动条。 可以通过firebug等工具查找到模块,在DW中ctrl+g行定位,修改方便。 属性段落间有缩进,保证了代码的整洁,层次清楚,符合编程语言代码规范,修改更加直观。

存在的问题:代码冗余(如空格符、tab符、换行符);文件大小增加;容易出现纵向滚动条。

来源:https://www.tulaoshi.com/n/20160220/1631180.html

延伸阅读
标签: Web开发
    之所以在讲述一切技术技巧之前先谈论CSS书写习惯,是因为我觉得技术技巧是可以很快学到的,但是书写习惯是慢慢形成的,无论是书写的条理性,命名的规范性,注释的易读性还是代码的简化性都不是一朝一夕能够形成的。所以希望学习CSS的朋友们从一开始就要养成良好的书写习惯,这对将来自己查改样式或者交由他人修改的可读性都...
标签: Web开发
mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //显示属性 * display * list-style * position * float * clear //自身属性 * width * height * margin * padding * border * background //文本属性 * color * font * tex...
标签: Web开发
CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。 样式表索引 样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。 给出该css文件作者的相关信...
标签: Web开发
整理了一下自己写CSS时的顺序,跟大家分享下。 下表顺序为从上到下,从左到右: ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...
标签: Web开发
CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:menu 主导航:mainMenu 子导航:subMenu 标 志:Logo 标 语:b...

经验教程

241

收藏

97
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部