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..,如图: