什么是css

CSS(全称Cascading Style Sheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且分散,很难做到精通,在我们日常开发中,常常忽视了 CSS代码的质量,很容易写出杂乱无章的 CSS 文件。代码优化建议
1.使用缩写属性精简代码
适用于:margin、padding、border、font、 background 等
但并非所有情况下都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项,这时候需要开发者自行判断。
2.合并选择器
使用","连接多个选择器定义公用属性,不仅能增加可读性,还能减小css 文件大小。
3.使用更语义化的单词命名class
命名的时候以“在你之后开发的人不会产生疑惑”为目标
4.属性声明顺序
选择器中属性数量较多时,将相关的属性声明放在一起,并按以下顺序排列:

定位相关,如position、top/bottom/left/right、z- index 等
盒模型相关,如display、float、margin、width/ height 等
排版相关,如font、color、line-height等可视相关,如background、color等其他,如opacity、animation 等
建议:在属性数量较多时可以参考这5个类别归类排列。
5.使用 & 符号引用父选择器
&是 Sass 和 Less 中提供的语法糖,用于表示对父选择器的引用
优点:非常适合用于编写组件的样式,减少了很多重复单词
缺点:从HTML的class name中寻找对应样式的成本增加
Sass .vs. Less?
预处理器将CSS 从声明语言转换成一门编程语言变量与混合特性能够减少很多重复的样式声明 Less 更像 CSS,易于上手,能够从CSS平滑过渡;Sass 的缩进语法接受度因人而异,Sass3.0中提出了兼容 CSS 的Scss,用户可以选择使用 Sass 或 Scss。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值