有没有办法让软件生成的CSS表更具可读性？

Question

我目前正在编辑我的工作网站，它只需要在这里和那里进行一些修改就可以更新它并且可以解决一些问题。网络工作从来都不是我最强的套装，但我通常可以通过某种程度的能力来编辑HTML和CSS。

我遇到的问题是最初开发网站的第三方看起来已经使用某种软件来生成CSS，并且从未打算手动使用。这只是一个巨大的文本块，至少可以说是令人生畏！

花费大部分时间来完成这项工作，我设法将代码分成几部分，将部分分成新的部分，但它仍然很大，而且我不是CSS专家，因此部件仍然是有点凌乱，有些部分我怀疑（虽然没有足够的信心去除它们）没有像标签似乎没有属性或多个部分做同样的事情导致混乱和做出任何改变我确实做得更复杂。

基本上对网站进行了一些改动已经变成了一个彻头彻尾的困境，我已经取得了一些进展，但实际上进展缓慢。这样很好，但我不想最后碰到一堵砖墙，我只能理解发生了什么。

你们有什么建议或提示，我怎样才能把CSS表格搞定并让它更具可读性？也许您必须处理类似的问题，并且您采用了一些技巧来使布局不佳的表格更容易管理？我非常乐意接受你们可以带来的任何支持，我知道这可能是一个奇怪的问题，但这是我在现实世界的CSS应用程序中切入口，这似乎是一个地方得到一些经验丰富的帮助！

提前感谢您提供的任何帮助！如果我弄乱了这篇文章，请告诉我，我会对其进行编辑，或者如有必要，请将其删除。

Answer 1

可以在Stack Overflow上找到一个快速简便的选项：示例：如果你有这个CSS代码块（全部在一行）：

.asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。sdfg {width：500px;}。asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}。asd {margin：12px; } .asd {margin：12px; } .kjhsdf {padding：10px;} div.abc＆gt; .sdfg {width：500px;}

现在，如果您在此处的答案中打开一个新代码段（单击文本编辑器上边距中左侧的第7个图标）并将此代码粘贴到CSS部分，则可以点击{{1}在代码段编辑器的左栏中，代码格式如下，可以在任何你喜欢的地方复制/粘贴：

Tidy

Answer 2

Chrome在底栏中内置了这个漂亮的按钮，可以在检查器中取消缩小或漂亮打印选定的来源，这一点并不过分。

Chrome检查器 - ＆gt;来源标签 - ＆gt; {}