CSS的代码规范

网友投稿 738 2022-05-30

任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和拓展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。

1.目录结构命名规范

存放CSS样式文件的目录一般命名为style或css。

2.CSS样式文件的命名规范

在项目初期,会把不同类别的样式放于不同的CSS文件,这是为了CSS编写和调试的方便;在项目后期,为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件,这个文件一般命名为style.css或css.css。

3.CSS选择符的命规范

所有CSS选择符必须由英文字母、数字或“-”下划线组成,必须以字母开头,不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符,做到“见其名知其意”,这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义(禁止出现如Div1、Div2、Style1等命名)。

当定义的样式名比较复杂时用下划线把层次分开,例如以下定义页面导航菜单选择符的CSS:

#nav_logo{…}

#nav_logo_ico{…}

4.CSS的工作环境

为代码添加注释是一种良好的编程习惯。注释可以增强CSS文件的可读性,后期维护也将更加便利。

在CSS中添加注释非常简单,它是以“/ *”开始,以“/ *”结尾。注释可以是单行,也可以是多行,并且可以出现在CSS代码的任何地方。

(1)结构性注释

结构性注释仅仅是用风格统一的大注释块从视觉上区分被分隔的部分,如以下代码所示:

/ *header(定义网页头部区域)------------------------- * /

CSS的代码规范

(2)提示性注释

在编写CSS文档时,可能需要某种技巧解决某个问题。在这种情况下,最好将这个解决方案简要的注释在代码后面,如以下代码所示:

.news_list li span{

float:left; / *设置新闻发布时间向左滑动,与新闻标题并列显示 * /

width:80px;

color:#999;/ * 定义新闻发布时间为灰色,弱化发布的时间在视觉上的感觉 */

}

CSS

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:应用测轻松优雅接入华为IoT平台
下一篇:【docker系列】CentOS操作系统安装DockerCE
相关文章