如何组织我的 CSS 规则？

Question

我正在使用 Notepad ++，我需要知道如何为每个 css 规则添加中断，以便它们不在同一行。我需要一个插件，比如 XML tools>pretty print。

我的 CSS 如下所示：

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p{margin:0;padding:0;line-height:1.5em;}fieldset,img{border:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-weight:normal;cursor:default;}p,span{cursor:default;}input,button,textarea,select,optgroup,option,pre{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}table{border-collapse:collapse;border-spacing:0;}tr,td{padding:0;margin:0;}html,body{position:absolute;left:0;right:0;top:0;bottom:0;}.ui-row::after,.ui-container::after,.ui-component::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.ui-container{position:absolute;top:.5em;bottom:.5em;left:.5em;right:.5em;}.ui-container.type-b{top:0;bottom:0;left:0;right:0;}.ui-container.flow{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin:.5em;}.ui-grid{position:relative;display:block;width:100%;height:100%;margin:auto;overflow:auto;}.ui-row{width:100%;position:relative;}.ui-row.auto{height:auto;}.ui-col{float:left;height:100%;position:relative;}.ui-col.auto{height:auto;}.ui-gutter.type-a{height:1em;}.ui-gutter.type-b{height:1.5em;}.ui-gutter.type-c{height:2em;}.ui-gutter.small{height:.5em;}.ui-block{height:100%;display:inline-block;}.ui-block.type-a{width:.5em;}.ui-block.type-b{width:1em;}.ui-block.type-c{width:1.5em;}.quarter{width:2.08%;}.half{width:4.166%;}.u1{width:8.333%;}.u2{width:16.666%;}.u3{width:25%;}.u4{width:33.333%;}.u5{width:41.666%;}.u6{width:49.999%;}.u7{width:58.333%;}.u8{width:66.666%;}.u9{width:74.999%;}.u10{width:83.333%;}.u11{width:91.666%;}.u12{width:100%;}.u1.half{width:12.59%;}.u2.half{width:20.82%;}.u3.half{width:29.16%;}.u4.half{width:37.49%;}.u5.half{width:45.83%;}.u6.half{width:54.16%;}.u7.half{width:62.49%;}.u8.half{width:70.83%;}.u9.half{width:79.16%;}.u10.half{width:87.49%;}.u11.half{width:95.83%;}.sixteen .u1{width:6.25%;}.sixteen .u2{width:12.5%;}.sixteen .u3{width:18.75%;}.sixteen .u4{width:25%;}.sixteen .u5{width:31.25%;}.sixteen .u6{width:37.5%;}.sixteen .u7{width:43.75%;}.sixteen .u8{width:50%;}.sixteen .u9{width:56.25%;}.sixteen .u10{width:62.5%;}.sixteen .u11{width:68.75%;}.sixteen .u12{width:75%;}.sixteen .u13{width:81.25%;}.sixteen .u14{width:87.5%;}.sixteen .u15{width:93.75%;}.sixteen .u16{width:100%;}.static>.ui-col{position:absolute;top:0;bottom:0;}.static>.ui-col:last-child{right:0;width:auto;}.w1>.ui-col:first-child{width:200px;}.w1>.ui-col:last-child{left:200px;}.w2>.ui-col:first-child{width:300px;}.w2>.ui-col:last-child{left:300px;}.w3>.ui-col:first-child{width:450px;}.w3>.ui-col:last-child{left:450px;}body{font-size:16px;line-height:1.5em;font-family:Verdana,Helvetica;}h1{font-size:216.6%;}h2{font-size:166.6%;}h3{font-size:141.6%;}h4{font-size:116.6%;}h5{font-size:100%;font-weight:bold;}h6{font-size:100%;font-style:italic;}.h7{font-size:75%;}p,span,a,strong,em,abbr,.copy,button,table{font-size:100%;}b{font-size:100%;font-weight:bold;}i{font-size:100%;font-style:italic;}pre{white-space:pre-wrap;cursor:default;margin:0;}

我需要这样的：

.dialog.type-f {
        width: 99%;
        left: 0.5%;
        margin-left: 0;
    }
    .dialog.type-f section {
        overflow: auto;
    }

提前致谢

Answer 1

由于这段代码被缩小，我想这不是你的 css 代码。

这个网站会为你做的工作

• http://mrcoles.com/blog/css-unminify/

在你的情况下：

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, button, textarea, p {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}
fieldset, img {
    border: 0;
}
li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    cursor: default;
}
p, span {
    cursor: default;
}
input, button, textarea, select, optgroup, option, pre {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
tr, td {
    padding: 0;
    margin: 0;
}
html, body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.ui-row::after, .ui-container::after, .ui-component::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.ui-container {
    position: absolute;
    top: .5em;
    bottom: .5em;
    left: .5em;
    right: .5em;
}
.ui-container.type-b {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.ui-container.flow {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: .5em;
}
.ui-grid {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: auto;
}
.ui-row {
    width: 100%;
    position: relative;
}
.ui-row.auto {
    height: auto;
}
.ui-col {
    float: left;
    height: 100%;
    position: relative;
}
.ui-col.auto {
    height: auto;
}
.ui-gutter.type-a {
    height: 1em;
}
.ui-gutter.type-b {
    height: 1.5em;
}
.ui-gutter.type-c {
    height: 2em;
}
.ui-gutter.small {
    height: .5em;
}
.ui-block {
    height: 100%;
    display: inline-block;
}
.ui-block.type-a {
    width: .5em;
}
.ui-block.type-b {
    width: 1em;
}
.ui-block.type-c {
    width: 1.5em;
}
.quarter {
    width: 2.08%;
}
.half {
    width: 4.166%;
}
.u1 {
    width: 8.333%;
}
.u2 {
    width: 16.666%;
}
.u3 {
    width: 25%;
}
.u4 {
    width: 33.333%;
}
.u5 {
    width: 41.666%;
}
.u6 {
    width: 49.999%;
}
.u7 {
    width: 58.333%;
}
.u8 {
    width: 66.666%;
}
.u9 {
    width: 74.999%;
}
.u10 {
    width: 83.333%;
}
.u11 {
    width: 91.666%;
}
.u12 {
    width: 100%;
}
.u1.half {
    width: 12.59%;
}
.u2.half {
    width: 20.82%;
}
.u3.half {
    width: 29.16%;
}
.u4.half {
    width: 37.49%;
}
.u5.half {
    width: 45.83%;
}
.u6.half {
    width: 54.16%;
}
.u7.half {
    width: 62.49%;
}
.u8.half {
    width: 70.83%;
}
.u9.half {
    width: 79.16%;
}
.u10.half {
    width: 87.49%;
}
.u11.half {
    width: 95.83%;
}
.sixteen .u1 {
    width: 6.25%;
}
.sixteen .u2 {
    width: 12.5%;
}
.sixteen .u3 {
    width: 18.75%;
}
.sixteen .u4 {
    width: 25%;
}
.sixteen .u5 {
    width: 31.25%;
}
.sixteen .u6 {
    width: 37.5%;
}
.sixteen .u7 {
    width: 43.75%;
}
.sixteen .u8 {
    width: 50%;
}
.sixteen .u9 {
    width: 56.25%;
}
.sixteen .u10 {
    width: 62.5%;
}
.sixteen .u11 {
    width: 68.75%;
}
.sixteen .u12 {
    width: 75%;
}
.sixteen .u13 {
    width: 81.25%;
}
.sixteen .u14 {
    width: 87.5%;
}
.sixteen .u15 {
    width: 93.75%;
}
.sixteen .u16 {
    width: 100%;
}
.static>.ui-col {
    position: absolute;
    top: 0;
    bottom: 0;
}
.static>.ui-col:last-child {
    right: 0;
    width: auto;
}
.w1>.ui-col:first-child {
    width: 200px;
}
.w1>.ui-col:last-child {
    left: 200px;
}
.w2>.ui-col:first-child {
    width: 300px;
}
.w2>.ui-col:last-child {
    left: 300px;
}
.w3>.ui-col:first-child {
    width: 450px;
}
.w3>.ui-col:last-child {
    left: 450px;
}
body {
    font-size: 16px;
    line-height: 1.5em;
    font-family: Verdana, Helvetica;
}
h1 {
    font-size: 216.6%;
}
h2 {
    font-size: 166.6%;
}
h3 {
    font-size: 141.6%;
}
h4 {
    font-size: 116.6%;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
h6 {
    font-size: 100%;
    font-style: italic;
}
.h7 {
    font-size: 75%;
}
p, span, a, strong, em, abbr, .copy, button, table {
    font-size: 100%;
}
b {
    font-size: 100%;
    font-weight: bold;
}
i {
    font-size: 100%;
    font-style: italic;
}
pre {
    white-space: pre-wrap;
    cursor: default;
    margin: 0;
}

Answer 2

试试prettydiff.com，因为它还可以处理 SASS 项目中的 SCSS 等高级结构。这是 Pretty Diff 吐出的内容：

body,
div,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
button,
textarea,
p {
    line-height: 1.5em;
    margin: 0px;
    padding: 0px;
}
fieldset,
img {
    border: 0px;
}
li {
    list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    cursor: default;
    font-weight: normal;
}
p,
span {
    cursor: default;
}
input,
button,
textarea,
select,
optgroup,
option,
pre {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0px;
}
tr,
td {
    margin: 0px;
    padding: 0px;
}
html,
body {
    bottom: 0px;
    left: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
}
.ui-row::after,
.ui-container::after,
.ui-component::after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0px;
    height: 0px;
    visibility: hidden;
}
.ui-container {
    bottom: 0.5em;
    left: 0.5em;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}
.ui-container.type-b {
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
}
.ui-container.flow {
    bottom: auto;
    left: auto;
    margin: 0.5em;
    position: relative;
    right: auto;
    top: auto;
}
.ui-grid {
    display: block;
    height: 100%;
    margin: auto;
    overflow: auto;
    position: relative;
    width: 100%;
}
.ui-row {
    position: relative;
    width: 100%;
}
.ui-row.auto {
    height: auto;
}
.ui-col {
    float: left;
    height: 100%;
    position: relative;
}
.ui-col.auto {
    height: auto;
}
.ui-gutter.type-a {
    height: 1em;
}
.ui-gutter.type-b {
    height: 1.5em;
}
.ui-gutter.type-c {
    height: 2em;
}
.ui-gutter.small {
    height: 0.5em;
}
.ui-block {
    display: inline-block;
    height: 100%;
}
.ui-block.type-a {
    width: 0.5em;
}
.ui-block.type-b {
    width: 1em;
}
.ui-block.type-c {
    width: 1.5em;
}
.quarter {
    width: 2.08%;
}
.half {
    width: 4.166%;
}
.u1 {
    width: 8.333%;
}
.u2 {
    width: 16.666%;
}
.u3 {
    width: 25%;
}
.u4 {
    width: 33.333%;
}
.u5 {
    width: 41.666%;
}
.u6 {
    width: 49.999%;
}
.u7 {
    width: 58.333%;
}
.u8 {
    width: 66.666%;
}
.u9 {
    width: 74.999%;
}
.u10 {
    width: 83.333%;
}
.u11 {
    width: 91.666%;
}
.u12 {
    width: 100%;
}
.u1.half {
    width: 12.59%;
}
.u2.half {
    width: 20.82%;
}
.u3.half {
    width: 29.16%;
}
.u4.half {
    width: 37.49%;
}
.u5.half {
    width: 45.83%;
}
.u6.half {
    width: 54.16%;
}
.u7.half {
    width: 62.49%;
}
.u8.half {
    width: 70.83%;
}
.u9.half {
    width: 79.16%;
}
.u10.half {
    width: 87.49%;
}
.u11.half {
    width: 95.83%;
}
.sixteen .u1 {
    width: 6.25%;
}
.sixteen .u2 {
    width: 12.5%;
}
.sixteen .u3 {
    width: 18.75%;
}
.sixteen .u4 {
    width: 25%;
}
.sixteen .u5 {
    width: 31.25%;
}
.sixteen .u6 {
    width: 37.5%;
}
.sixteen .u7 {
    width: 43.75%;
}
.sixteen .u8 {
    width: 50%;
}
.sixteen .u9 {
    width: 56.25%;
}
.sixteen .u10 {
    width: 62.5%;
}
.sixteen .u11 {
    width: 68.75%;
}
.sixteen .u12 {
    width: 75%;
}
.sixteen .u13 {
    width: 81.25%;
}
.sixteen .u14 {
    width: 87.5%;
}
.sixteen .u15 {
    width: 93.75%;
}
.sixteen .u16 {
    width: 100%;
}
.static > .ui-col {
    bottom: 0px;
    position: absolute;
    top: 0px;
}
.static > .ui-col:last-child {
    right: 0px;
    width: auto;
}
.w1 > .ui-col:first-child {
    width: 200px;
}
.w1 > .ui-col:last-child {
    left: 200px;
}
.w2 > .ui-col:first-child {
    width: 300px;
}
.w2 > .ui-col:last-child {
    left: 300px;
}
.w3 > .ui-col:first-child {
    width: 450px;
}
.w3 > .ui-col:last-child {
    left: 450px;
}
body {
    font-family: Verdana, Helvetica;
    font-size: 16px;
    line-height: 1.5em;
}
h1 {
    font-size: 216.6%;
}
h2 {
    font-size: 166.6%;
}
h3 {
    font-size: 141.6%;
}
h4 {
    font-size: 116.6%;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
h6 {
    font-size: 100%;
    font-style: italic;
}
.h7 {
    font-size: 75%;
}
p,
span,
a,
strong,
em,
abbr,
.copy,
button,
table {
    font-size: 100%;
}
b {
    font-size: 100%;
    font-weight: bold;
}
i {
    font-size: 100%;
    font-style: italic;
}
pre {
    cursor: default;
    margin: 0px;
    white-space: pre-wrap;
}