CSS的代码规范

举报
发表于 2021/11/27 14:42:14 2021/11/27
【摘要】 任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和拓展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。1.目录结构命名规范存放CSS样式文件的目录一般命名为style或css。2.CSS样式文件的命名规范在项目初期,会把不同类别的样式放于不同的CSS文件,这是为了CSS编写和调试的方便;在项目后期...

任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和拓展。由于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(定义网页头部区域)------------------------- * /
(2)提示性注释
在编写CSS文档时,可能需要某种技巧解决某个问题。在这种情况下,最好将这个解决方案简要的注释在代码后面,如以下代码所示:
.news_list li span{
float:left; / *设置新闻发布时间向左滑动,与新闻标题并列显示 * /
width:80px;
color:#999;/ * 定义新闻发布时间为灰色,弱化发布的时间在视觉上的感觉 */
}

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。