css书写规范

young.li 发布于2019-08-29 15:19 / 1110人阅读

摘要：样式属性顺序单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。同时要以的顺序书写，提高代码的可读性。

在书写css样式的时候总是无意中就写乱了，无论是命名或者是样式的书写顺序，这里做一个总结，提醒自己在书写css的时候时刻注意，大家可以参考哈。

1. 样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。
同时要以Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等

Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow

Typographic 文本排版，相关属性包括：font, line-height, text-align

Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation

2. CSS选择器命名规则

分类式命名法(在前端组件化下尤为重要)

布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等

元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading等！

功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！

状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）

javascript(.j-)：.j-将被专用于JS获取节点，请勿使用.j-定义样式

不要使用 " _ " 下划线来命名css
能良好的区分javascript变量名
输入的时候少按一个shift键
浏览器兼容性问题（比如使用_tips的选择器命名，在IE6是无效的）

id采用驼峰式命名(不要乱用id)

scss中的变量、函数、混合、placeholder采用驼峰式命名

相同语义的不同类命名方法：
直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）

后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；

3. 最佳写法

    /* 这是某个模块 */
    .m-nav{}/* 模块容器 */
    .m-nav li,.m-nav a{}/* 先共性  优化组合 */
    .m-nav li{}/* 后个性  语义化标签选择器 */
    .m-nav a{}/* 后个性中的共性 按结构顺序 */
    .m-nav a.a1{}/* 后个性中的个性 */
    .m-nav a.a2{}/* 后个性中的个性 */
    .m-nav .z-crt a{}/* 交互状态变化 */
    .m-nav .z-crt a.a1{}
    .m-nav .z-crt a.a2{}
    .m-nav .btn{}/* 典型后代选择器 */
    .m-nav .btn-1{}/* 典型后代选择器扩展 */
    .m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */
    .m-nav .btn.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */
    .m-nav .m-sch{}/* 控制内部其他模块位置 */
    .m-nav .u-sel{}/* 控制内部其他元件位置 */
    .m-nav-1{}/* 模块扩展 */
    .m-nav-1 li{}
    .m-nav-dis{}/* 模块扩展（状态） */
    .m-nav.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */

4. 统一语义理解和命名

布局(.g-)

语义	命名	简写
文档	doc	doc
头部	head	hd
主体	body	bd
尾部	foot	ft
主栏	main	mn
主栏子容器	mainc	mnc
侧栏	side	sd
侧栏子容器	sidec	sdc
盒容器	wrap/box	wrap/box

模块（.m-）、元件（.u-）

语义	命名	简写
导航	nav	nav
子导航	subnav	snav
面包屑	crumb	crm
菜单	menu	menu
选项卡	tab	tab
标题区	head/title	hd/tt
内容区	body/content	bd/ct
列表	list	lst
表格	table	tb
表单	form	fm
热点	hot	hot
排行	top	top
登录	login	log
标志	logo	logo
广告	advertise	ad
搜索	search	sch
幻灯	slide	sld
提示	tips	tips
帮助	help	help
新闻	news	news
下载	download	dld
注册	regist	reg
投票	vote	vote
版权	vcopyright	cprt
结果	result	rst
标题	title	tt
按钮	button	btn
输入	input	ipt

功能（.f-）

语义	命名	简写
清除浮动	clearboth	cb
左浮动	floatleft	fl
内联	inlineblock	ib
文本居中	textaligncenter	tac
垂直居中	verticalalignmiddle	vam
溢出隐藏	overflowhidden	oh
完全消失	displaynone	dn
字体大小	fontsize	fz
字体粗细	fontweight	fs

皮肤（.s-）

语义	命名	简写
字体颜色	fontcolor	fc
背景颜色	backgroundcolor	bgc
边框颜色	bordercolor	bdc

状态(.z-)

语义	命名	简写
选中	selected	sel
当前	current	crt
显示	show	show
隐藏	hide	hide
打开	open	open
关闭	close vclose
出错	error	err
不可用	disabled	dis

5. 注意事项

一律小写，中划线

尽量不用缩写

不要随便使用id

去掉小数点前面的0： 0.9rem => .9rem

使用简写：margin： 0 1rem 3rem

本文大部分内容参考自网易前端规范：http://nec.netease.com/standa...

idc机房托管超融合服务器 css规范书写书写技巧书写顺序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113245.html

css命名和书写规范

摘要：前言在项目开发中对于名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来，且一定要有值如每个标签都要有开始和结束，且前言在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下....

wua_wua2012 2019-08-30 14:05 评论0 收藏0
css命名和书写规范

摘要：前言在项目开发中对于名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来，且一定要有值如每个标签都要有开始和结束，且前言在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下....

王笑朝 2019-08-01 18:39 评论0 收藏0
推荐大家使用的CSS书写规范、顺序

摘要：书写顺序位置属性等大小文字系列等背景等其他等书写规范使用缩写属性有些属性是可以缩写的，比如等等，这样精简代码同时又能提高用户的阅读体验。CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, le...

王军 2019-04-23 13:39 评论0 收藏0
团队合作前端书写习惯总结

摘要：函数的名字前缀为动词，以此区分变量和函数示例函数命名命名方法小驼峰式命名法命名规范前缀应当为动词命名建议可使用常见动词约定动词含义返回值判断是否可执行某个动作权限函数返回一个布尔值。含有此值不含有此值判断是否为某个值函数返回一个布尔值。CSS 规范 CSS 书写规范 class类：小写字母,-分割；图片: 小写字母，‘-’或者‘_’ 分...

番茄西红柿 2019-04-23 13:17 评论0 收藏0