css 下划线_CSS规范

最新推荐文章于 2024-04-10 09:16:02 发布

weixin_39932762

最新推荐文章于 2024-04-10 09:16:02 发布

阅读量382

点赞数

文章标签： css 下划线 css 加粗 css 字体倾斜 css下划线样式 css字体样式代码大全 css样式代码大全

规范化的CSS不仅利于团队合作，而且对后期的维护以及代码的重用，都非常重要。

我们从以下四个方面来介绍一下关于CSS规范的内容。

(1)命名规范

(2)书写规范

(3)注释规范

(4)CSS reset

命名规范

命名规范，主要有四个方面：CSS文件命名、id和class命名、网页主体命名、网页细节命名。

CSS文件命名

不同样式和内容的文件要用不同的名字来区分，方便后期查看。

文件名	说明
reset.css	重置样式
global.css	全局样式，定义页面基础样式
themes.css	主题样式
module.css	模板样式
master.css	母版样式
columns.css	专栏样式
form.css	表单样式
mend.css	补丁样式
print.css	打印样式

文件命名方式很多，不用刻意去记，需要的时候直接查看就行。

id和class命名

id和class命名，比较常见的有三种方法。

(1)骆驼峰命名法

(2)中划线命名法

(3)下划线命名法

命名统一规范，尽量不要出现一个用中划线命名，而另外一个用下划线命名的情况。

网页主体命名

主体部分命名可以参考下表

主体部分	命名
最外层	wrapper
头部	header
内容	content
侧栏	sidebar
栏目	column
导航条	nav
标志	logo
主体	main
左侧	main-left

网页细节命名

细节部分可以分为导航、菜单、其它三部分。

(1)导航命名

导航部分	命名
主导航	main-nav
子导航	sub-nav
边导航	side-nav
左导航	leftside-nav
右导航	rightside-nav
顶导航	top-nav

(2)菜单命名

菜单部分	命名
菜单	menu
子菜单	submenu

(3)其它命名

其它部分	命名
标题	title
摘要	summary
登录条	loginbar
搜索	search
标签页	tab
图标	icon
工具条	toolbar
帮助	help
指南	guide

对于上面的命名规范，不用刻意去记，在需要的时候查看就行了，主要要了解这种思想，为以后的开发节约成本。

书写规范

CSS中，属性的书写顺序也是很有讲究的。良好的书写顺序习惯，既方便阅读，同时也方便后期维护。

推荐的CSS属性书写顺序如下表

属性类别	举例
影响文档流属性	display、position、float等
自身盒模型属性	width、height、padding等
文本性属性	font、line-height等
装饰性属性	color、background-color等
其它属性	content、list-style等

注释规范

CSS中，为一些关键代码做一下注释是非常必要的。可以带来许多方便，如：方便理解、方便查找、方便项目组里的其他开发人员了解你的代码、方便以后对自己的代码进行修改。

顶部注释

文件基本信息

模块注释

模块注释是各个模块(如导航、底部信息栏等)的注释说明，模块注释建议要说明“开始”和“结束”

/*导航部分开始*/

/*导航部分结束*/

简单注释

简单注释一般用于注释某些关键代码，如功能代码。简单注释分为单行注释和多行注释这两种。

单行注释

/* */