网站建设资讯

NEWS

网站建设资讯

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命名的书写顺序是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


分享文章:CSS命名的书写顺序是什么
本文地址:http://cdweb.net/article/pihdsp.html