Js-beautify: CSS 单行格式

#330 的副本。 但是考虑到这个请求的年龄，我保持这个开放。

Visual Studio 对 *.css 文件有一个紧凑的功能，就像@Alex360hd 所希望的那样。

带有来自 js-beauty 的扩展插件的 Visual Studio 代码还没有这个功能。

紧凑功能使您的代码为 1000 行（紧凑）与 5000 行（旧格式），您可以使用 God Perspective 控制您的 *.css 文件。

来自 sass/less long code hater。

是的，为此+1。 我真的很喜欢 css 单行格式，每个选择器彼此相邻，它提供了一个非常好的透视图。

我希望使用缩小器将多行样式转换为单行，并使用美化器将单行转换为多行。

跟进@evocateur的#330意见（“美化者的工作不是缩小代码，而是重新格式化代码以保持一致性和可读性”）：这里提到的cssmin已被弃用，取而代之的是clean-css （另请参阅如何将 clean-css 与构建工具一起使用？ ）。 使用clean-css很容易获得“单行格式” - 最简单的设置是

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

那转

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

进入

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

从那里，微调spaces选项

我同事的每个年轻开发人员都用 long long long less/sass 编写每一行，并且到处都遵守。

原谅我的池代码-_-!!。

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

输出：

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

只需压缩 {} 之间的代码，排除 .scss&.less 文件。
我想知道是否有 option.css。 压缩以格式化*.css 。 :)

@evocateur

美化器的工作不是缩小代码，而是重新格式化代码以保持一致性和可读性

那不是缩小，单行格式为多个选择器规则保留一些空格和一些行返回。

对我和很多网络开发者来说，这个：

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

比这更具可读性：

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

不。

2017 年 3 月 22 日 01:08，Alex360hd [email protected]写道：

@evocateur

美化器的工作不是缩小代码，而是重新格式化代码以保持一致性和可读性

对我和很多网络开发者来说，这个：

.btn {边框：1px纯黑色； 背景：#fff; 边框半径：5px颜色：#000； }
. btn：悬停{背景：#000; 颜色：#fff; }
比这更具可读性：

.btn {
边框：1px纯黑色；
背景：#fff;
边框半径：5px；
颜色：#000;
}

. 按钮：悬停{
背景：#000;
颜色：#fff;
}
—
你收到这个是因为你被提到了。
直接回复此电子邮件，在 GitHub 上查看它，或将线程静音。

漂亮的论证...

就我个人而言，我喜欢对我的 CSS 选择器有一个很好的概述，并使用“常规”语法，我在视口中几乎看不到超过 3 或 4 个选择器。

使用单行格式，我可以看到 20 或 30 个选择器（至少），并且我可以轻松地对一组元素进行概览。

而当你熟悉 CSS，巧妙地使用继承和选择器时，你很少有超过 5 或 6 条规则的选择器，而我们今天的屏幕，（非常大），我可以在没有水平滚动条的情况下看到我的所有规则。 （如果是这种情况，我的 IDE 有很多自动换行选项）。

如果您搜索在线 css formatter，您会看到其中许多都有单行选项，可能是因为它对某些人感兴趣...

@evocateur - 🌟 对你的脾气暴躁猫印象的金星。 🌟 😃

@Alex360hd @jsonchou - 你的观点很好。 这介于缩小和美化之间，这就是为什么这个问题保持开放并列为增强。

这是一个合理的要求，但对于我自己和该项目的其他主要贡献者（如@evocateur）来说，它的优先级较低。 如果有人选择提交包含 javascript 和 python 实现以及足够范围测试的 PR，它将被接受。 但我们还有其他我们认为对整个项目具有更高优先级的任务。

@olets
感谢您指出解决方法和备用 css 工具！

@jsonchou -
抱歉，总有一个正则表达式适用于大多数输入，或者至少适用于您或我会尝试的所有输入。 然而，它们从来没有真正适用于所有输入，最终它们是不可维护且容易出错的——这就是 css-beautifier 代码变得像今天一样难以维护的原因。 感谢您提供一种解决方法，如果他们选择冒险，人们可以入侵，但我希望他们改用@olets解决方案。 😄

@jsonchou注意 LESS 和 Sass 中的//inline comments

@Alex360hd @Zmove

我为 VSCode 编写了一个 css 紧凑型插件。

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

太好了，我会试试的。

嘿@jsonchou - 我想如果你把你的插件带到 sass/scss 世界，会有很多人使用它。 想想为什么在这个拥有 3000 像素宽显示器的时代，人们倾向于在 CSS 中使用 5% 的屏幕空间，这让我大吃一惊！

我什至会把你的插件带到让人们指定属性需要去的顺序。 位置和显示之类的东西应该放在列表的前面，然后是边距、填充等，然后是颜色、字体等。

对我来说，在一个有很多人编写 SCSS 的团队中，这被证明是非常强大的。

对不起伙计们，有人给我一个很好的理由让属性密钥值在不同的行上吗？ 在移动设备上编写 CSS？

史蒂文

@tateman74也许我会尝试将 .scss 文件设为单行，但我认为 ORDER 属性应该由第三种解决方案（如 csscomb）完成。

啊有趣。 CSSComb 肯定是我想要订购的东西。 我猜得为它做一个 VSCode 扩展。

SCSS 可能有点挑战性，因为换行符实际上意味着什么。 为了获得最佳可读性，这始终是我格式化内容的方式：

• 规则前总是一个换行符，无论是否嵌套
• 总是在自己的线上卷曲

回到过去（在我的 MySpace 工作时代:)），几个 css 伙伴和我推断供应商前缀应该从换行符开始，因为它们基本上是（被忽略的）属性类型。 也就是说，它们有意义，但只是为了兼容。 我想在这个时代，无论如何我们都应该使用 PostCSS，所以那些供应商前缀不应该存在。

再次感谢，如果我能帮上忙，请告诉我。 这是我喜欢的一个非常典型的 SCSS 文件。
有人告诉我这不可读！ :)

史蒂文

你们中有人觉得这个功能有用吗，愿意为css美化器实现这个功能吗？ 应该不会那么难吧。

这将至少需要 css 标记化才能使其工作（#545）。 即使完成了，也需要一些工作才能实现。