CSS命名的书写顺序是什么

这篇文章主要介绍“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{}）注：后代决议器不要在页面组织中应用，因为传染的可能性较大；

关于“CSS命名的书写顺序是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。