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, bac千克round, 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
配景颜色 bac公斤roundcolor 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

以上是“CSS代码命名规则的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！