css 下划线_前端开发教程CSS(一)规范 CSS 的命名和书写

规范一览:

  • CSS书写顺序

  • 不要随意使用Id

  • 使用CSS缩写属性

  • 去掉小数点前的 0

  • 16进制颜色代码缩写

  • 简写命名

  • 连字符CSS选择器命名规范

  • 为选择器添加状态前缀

  • 常用的CSS命名表

⭐CSS书写顺序

1.位置属性:positiontoprightz-indexdisplayfloat

2.大小:widthheightpaddingmargin

3.文字系列:fontline-heightletter-spacingcolor- text-align

4.背景:backgroundborder

5.其他:animationtransition

40bc0f6ae1f7f47843e4924ee396c044.png

不要随意使用Id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

使用CSS缩写属性#

比如 paddingmarginfont等等

0f5d4e9eeab408e06b78c5d4b13ab295.png

去掉小数点前的 0

5196c0bf598b207f028f6a9c72d9eb96.png

image

16进制颜色代码缩写

5743b4ee04f4912cc89698eb54ffe659.png

简写命名#

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

81668f678c24af4d84545091c3a94db6.png

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线 - 来为选择器命名。

2.不建议使用_下划线来命名CSS选择器,为什么呢?

  • 输入的时候少按一个shift键;

  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  • 能良好区分JavaScript变量命名(JS变量命名是用 _)

18554de970a1e7673ac56c75b330ffdc.png

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀:

826695255ba842dbbca31fb4698b0db9.png

CSS命名规范(规则)常用的CSS命名规则

[

ac93f6d6afb9c0b71c4767c2fa2a84a4.png

我们的前端学习扣群: 731771211 ,里面都是学习前端的。2020最新技术,从企业招聘人才需求 到怎么学习前端开发,和学习什么内容都有免费系统分享。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

希望可以帮助你快速了解前端,学习前端

d7019730eb3d3d1dc774db4aeaa6b9aa.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值