这些总结的css代码格式值得你拥有!

  • 时间:2018-12-30 23:26 作者:星前线 来源:星前线 阅读:800
  • 扫一扫,手机访问
摘要:选择器、属性和值都是用小写这一点非常关键:根据xhtml规范,所有的标签属性和值都要使用小写形式,而我们知道xhtml更为标准,所以最好遵循之,这样,选择器必需小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了,如class="u-leftArrow"实际上就是不规范的了,最好写成cl

这些总结的css代码格式值得你拥有!

选择器、属性和值都是用小写

这一点非常关键:根据xhtml规范,所有的标签属性和值都要使用小写形式,而我们知道xhtml更为标准,所以最好遵循之,这样,选择器必需小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了,如class="u-leftArrow"实际上就是不规范的了,最好写成class=“u-left_arrow”,也可以表达相同的意思。

单行写完一个选择器定义

优点:便于选择器的寻觅和阅读,也便于插入新的选择器和编辑,便于板块等的识别。更重要的是可以去除多余空格,使代码紧凑减少换行。**试想,假如每一行只有一个属性名和属性值,那么对于一个大项目而言,就很难做到选择器的寻觅和阅读了,而使用一行写完一个选择器,那么就有可能缩短为1/6到1/10,这还是非常客观的。

最后一个值也要一分号结尾

实际上,在大括号结束前的值可以省略分号,但是这样做会对修改、增加和维护工作带来不必要的失误和麻烦。比方,在最后增加一个属性,假如之前没有在末尾增加分号,那么你就要在新增的属性前增加分号,否则就会出错

省略值为0的单位

优点:可以节省不必要的字节同时也为了方便阅读,我们将0px、0em、0%等都缩写为0

使用16进制表示颜色值,其中的字母使用大写形式,并尽量缩写。

除非在你需要透明度而使用rgba,否则都是用#FFFFFF这样的写法,并尽量缩写,如#FFF。使用大写形式,是由于这样更加具备易读性,且有利于压缩,而缩写为了减少不必要的字节。

根据属性的重要性顺序书写

只遵循横向顺序就可,即先书写定位布局类属性,在书写盒模型等自身属性,最后书写文本类及修饰类属性。 另外,假如属性间存在关联性,则不要隔开写

height和line-height具备关联性,我们尽量不要分开写。

私有在前,标准在后

先写带有浏览器私有标志的属性,后写W3C标准的属性。由于私有的属性,说明浏览器自身还没有规范化,标准属性是用不了的。若某一天该浏览器的属性规范化了,那么说明标准属性可以使用了,而假如我们先写W3C标准属性,最后写私有属性,就有可能导致私有属性覆盖标准属性。因而私有在前,标准在后的写法是考虑到了以后可能会出现的问题。

选择器等级

!important>行内样式style>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器

css内部的顺序

我认为,对于一个网页而言,我们在写css时,可以分为几个部分来写,比方header部分的css代码,main部分的css代码,部分之间通过空格隔开并给以响应的注释,这样更有利于我们的阅读和后期的维护

优化方案:

对于可以缩写的值尽量采用缩写形式,这样有利于减小css文件大小,并添加可读性和可维护性。且最好尽量减少没有实际作用的冗余的属性。有时我们会将定义相同的或者者有大部分属性值相同的一系列的选择器组合到一起(采用逗号的方法)来统肯定义,这样可以为你节省很多字节和宝贵时间。

类选择器的命名建议

在前面说到,命名className时,应当以其作用、功能来命名,而不要使用没有语义化或者者以颜色、左右空间位置的文字来命名。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部