首页前端开发CSS分类式命名法

分类式命名法

时间2024-05-23 01:08:03发布访客分类CSS浏览95
导读:分类式定名法(在前端组件化下很是需要 机关(grid)(.g-):将页面豆割为几个大块,一般有头部、主体、主栏、侧栏、尾部等! 模块(module)(.m-):一般为一个语义化的可以反复运用的较大的集团!比如导航、登录、注册等 元件(u...

分类式定名法(在前端组件化下很是需要)

机关(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{ } )注:尊长决议器不要在页面组织中运用,由于污染的或是性较大;

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 分类式命名法
本文地址: https://pptw.com/jishu/665967.html
单个样式规则应按功能进行分组 hadoop中secondnamenode怎么用

游客 回复需填写必要信息