有沒有辦法讓軟件生成的CSS表格更具可讀性？

Question

我目前正在編輯我的作品網站，它需要在這裏和那裏進行幾次觸摸升級來更新它，並且清理一些東西。網絡工作從來不是我最強硬的訴訟，但我可以通過某種程度的能力來編輯HTML和CSS。

我遇到的問題是最初開發該網站的第三方看起來已經使用某種軟件來生成CSS，並且從來沒有打算與人工合作。這只是一個巨大的文本塊，至少可以說是嚇人的！

我花了大部分時間來做這件事，我設法將代碼分割成幾部分，將部分分割成新行，但仍然很重要，我不是CSS專家，所以部分仍然有點雜亂的，有我懷疑的部分（雖然沒有足夠的信心去除它們）沒有做任何事情，就像標籤似乎沒有屬性或多個部分在做同樣的事情，導致混淆並做出任何更改，我會做要複雜得多。

基本上只對網站進行了一些更改已經變成了一個整體，我已經取得了一些進展，但它確實很慢。這很好，但我不想最終撞到一堵磚牆，我無法理解現在正在發生的事情。

你們對我如何整理CSS表格並使其更具可讀性有任何建議或提示嗎？也許你不得不面對一個類似的問題，並且你有一些技術可以讓一張佈局糟糕的表格更易於管理？我非常樂於接受你們可以帶來的任何支持，我知道這可能是一個奇怪的問題，但這是我在切實的CSS應用程序中削減我的牙齒，這似乎是獲得一些有經驗的幫助的地方！

非常感謝您提供任何幫助！如果我把這篇文章弄得一團糟，讓我知道，我會編輯它，或者如果有必要刪除它。

Answer 1

這個快速和容易的選擇，可以在這裏找到堆棧溢出：例：如果你的CSS代碼（全部在同一行）此塊：

的.asd {保證金：12px的; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;} .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;} .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;} .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc> .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc>。sdfg {width：500px;}

現在，如果您在此處打開一個答案中的新片段（單擊文本編輯器頂部邊距左側的第7個圖標）並將此代碼粘貼到CSS部分，則可以單擊Tidy在代碼片段編輯器的左列中，所述代碼的格式如下，並且可以複製/粘貼您想要的位置：

.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.asd { 
 
    margin: 12px; 
 
} 
 

 
.kjhsdf { 
 
    padding: 10px; 
 
} 
 

 
div.abc>.sdfg { 
 
    width: 500px; 
 
}

Answer 2

它不是過於明顯，鉻具有這個漂亮的按鈕內置於底部欄以取消縮小或漂亮打印選定的來源在檢查員。

Chrome檢查 - >源選項卡 - > {}