首页 网络技术
  1. 正文

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{})注:后代决议器不要在页面组织中应用,因为传染的可能性较大;

本文标题:CSS命名的书写顺序是什么
本文链接:https://www.qqooo.cn/post/6942.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!