CSS选择器命名规则

2019-10-09 郑州网站建设  

分类式定名法(在前端组件化下极为紧要)

结构(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-标志2、.m-标志3、u-btn、u-btn2等等。 定名方式(BEM):类-体(例:g-head)、类-体-润饰符(例:u-btn-active) 小辈抉择器:体-润饰符便可(例:.m-page .cut{})注:后辈决定器不要在页面组织中应用,因为沾染的兴许性较大;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/3182.html转载请标明出处,谢谢合作!
标签:
  • 规则
  • css
  • 分类
  • 命名
  • 定名
  • 选择器