css的应用到排序,CSS格式化---属性排序
一、背景
与同事合作开发一个项目，后面修改 CSS 时，发现属性顺序跟我写的不一样
我从事开发前端时，导师是有给我大概指定了一定的书写规范
现在开发时，看到的 CSS 属性排序不一样，看起来有点难受(代码洁癖)，修改起来也多少有点不方便
都说 JavaScript 代码要求规范，那么我们仔细说说为啥 CSS 也要有：
注：
这里参考了知乎的一篇文章，他说的理由我表示赞同，这里直接拷贝放这里
1、
作为写程序的人，除了希望代码的输出具有确定性;
即每写一行代码我知道我在写什么，我能预知到结果，还希望从代码风格上保持一致;
这样在写类似功能时，写出来的东西是有某种确定性的，代码会有种统一的风格在里面，同时阅读起来会很轻松
2、
当这些看似杂乱无序的属性在书写时遵从一定规律后，改起来会很方便;
比如我习惯将 width，height 这种基本的常用的属性写在元素样式的最前面，我在改的时候就直接到最前面去找
3、
会有一种，哲学上的美;
恩，就是看起来舒心的那种;
没有风格的编码是新手，想到哪写到哪，而具有一定风格的代码或许是老司机，虽然所坚持的风格不一定普适
二、规范 -- 依据 CSS 盒模型定制
流行的CSS顺序有多种书写方式
根据多年编码习惯，我比较偏向依据 盒模型 来定制 CSS 属性编写顺序
并且结合多种书写方式，在此基础上，做了一些调整，整理成自己喜欢的书写风格
大致分为以下几类
1、 content overflow position z-index display float ...
表示定位/布局的属性(content比较特殊，作为伪元素不可少的，经常放置于第一位)
2、 width height margin padding border ...
表示盒子模型的属性
3、 background ...
表示背景的属性
4、 color font line-height text-* vertical-align ...
字体相关的属性
5、 list-style ...
除 CSS3 外的其他属性
6、 border-radius transform ...
CSS3 属性
常用 CSS 属性排序
/* 每一类的顺序并不严格，可以随意，自己开心就好 */
/* 下面这个是比较通用的样式 */
.el {
/* 表示定位/布局的属性 */
content: ;
overflow: ;
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
/* 表示盒子模型的属性 */
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
/* 表示背景的属性 */
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
/* 字体相关的属性 */
color: ;
font: ;
font-family: ;
font-size: ;
font-weight: ;
line-height: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
/* 除 CSS3 外的其他属性 */
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
opacity: ;
cursor: ;
quotes: ;
/* CSS3 属性 */
border-radius: ;
transform: ;
}
三、使用工具来约束 CSS 规范
1、csscomb.js --- CSS 编码风格格式化工具
预配置三种编码风格，可以挑选自己想要的直接copy代码
4、配置文件：
创建 csscomb.json 配置文件，放于项目根目录
将上面的风格代码 copy 之后，放到 csscomb.json 即可
5、配合开发工具使用
我这里是使用 VS Code，到插件库里搜索下载 CSScomb 安装
该插件支持
.csscomb.json or csscomb.json
.csscomb.js or csscomb.js
等配置文件格式
使用方式：
F1, Ctrl+Shift+P on Windows
Cmd+Shift+P on macOS
6、贴一份自己使用的配置文件
配置代码太长，独立一篇随笔，这里放个链接
详解CSS float属性(转)
详解CSS float属性 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
MongoDB学习笔记~根据子集合里某个属性排序
回到目录 这个问题是这样的,有一个实体dog,里面有集合属性DogHistory,它里面有一些自己的属性,其中一个是SortNum,主要用来进行排序,而且这个排序可以影响主对象,即影响dog类,这个在 ...
CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
json对象数组按对象属性排序
var array = [ {name: 'a', phone: 1, value: 'val_4'}, {name: 'b', phone: 5, value: 'val_3'}, {name: ' ...
js 对象数组根据对象中的属性排序
function createComparisonFunction(propertyName){ return function(object1,object2){ var value1 = obje ...
【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
随机推荐
ubuntu kylin中如何截图
windows操作系统中,我通常使用的截图工具是QQ的“ctrl+alt+a”快捷键.但是在ubuntu中,linux qq常年不更新,我也就彻底放弃了使用了,反正ubuntu通常只是拿来开发.其实没 ...
[Javascript] Implement zip function
1. Use a for loop to traverse the videos and bookmarks array at the same time. For each video and bo ...
分析java 嵌套类与内部类
一.什么是嵌套类及内部类? 可以在一个类的内部定义另一个类,这种类称为嵌套类(nested classes),它有两种类型:静态嵌套类和非静态嵌套类.静态嵌套类使用很少,最重要的是非静态嵌套类 ...
NEU OJ 1649 GMZ’s Pretty Number
先来一次线性素数筛,把1到10000000的素数都筛选出来,然后暴力跑一遍所有可能的值,打个表,查询的时候o(1)效率出解. #include #include
Let the Balloon Rise(水)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 Let the Balloon Rise Time Limit: 2000/1000 MS (J ...
Centos7 LVM扩充存储空间
一. 以root账户运行命令界面:su or su - 二. 查看分区使用情况: fdisk -l /dev/sda or fdisk -l 三. 选择要扩充的分区,以sda2为例: fdisk / ...
mount 需要同时设置 noatime 和 nodiratime 吗？
相信对性能.优化这些关键字有兴趣的朋友都知道在 Linux 下面挂载文件系统的时候设置 noatime 可以显著提高文件系统的性能.默认情况下,Linux ext2/ext3 文件系统在文件被访问.创 ...
理解dynamic programming动态规划
何谓动态规划? 以菲波那切数列为例, int fib(int n ){ if(n == 0 || n ==1){ return 1; }else{ return fib(n - 1) + fib(n ...
VM虚拟机安装的XP如何全屏
首先安装install VMwear Tools..,如图: