Tufte-css: CSS格式

我选择此项目中使用的格式标准，是因为我不需要给左括号或右括号留出空间，并且因为发现水平交错是区分选择器块的有用的视觉/心理拐杖。

由于对我来说“标准” CSS缩进_decreases_易读性，我看到的唯一使用它的增值就是增加与外部项目的代码一致性。 我之所以没有如此令人信服的部分原因，是因为我没有在其他项目中花太多时间在CSS上，因此在上下文切换方面我没有精神上的负担。 陌生感是否会破坏他人？ 我没有看到“标准”缩进的其他好处吗？

就我而言，我为自己的项目将很多转换为SCSS，不得不将所有内容重新格式化为标准是很痛苦的。 我不记得那是仅仅是为了消除警告，还是因为它也引起了错误。 诸如嵌套之类的事情肯定需要重新格式化。

这也使我不愿再去进行更新，否则这些更新将更易于合并。

在具有80个字符的软包装的编辑器上（这是很正常的），媒体查询的各个部分变得非常混乱。

并不是我想抱怨！ :)每个人都有自己喜欢的格式化方式，只是让您了解我的经验。

问候，

@ yb66 SCSS转换是我不曾想到的重要原因。

...但是经过进一步检查，像http://csstoss.com/这样的工具难道不是很轻松吗？ 甚至只是选择所有右括号，在其后添加换行符，然后选择所有右括号，在之前添加换行符，然后重新缩进文件？

我也承认软包装的问题。

我认为指定格式并为给定的linter / formatter工具提供规范将非常有帮助。 我认为支持这种工具，然后在每个合并的提交中强制使用它，实际上会使人们更容易做出贡献和提出请求。 我认为没有人愿意花时间摆弄缩进和大括号，因为您可以在提交并完成操作之前在*.css文件上运行命令。 我对选择哪种格式并不关心，只是可以通过在提交更改之前运行简单的命令行工具来满足要求。

一种选择是stylelint.io，但还有其他选择。

编辑：语法

我的意思是，自从恐龙在地球上漫游并通过船在大西洋上发送提交内容的日子以来，自述文件中就有了CSS样式指南部分。 我执行该标准的政策是

1. 希望人们顺应
2. 接受公关
3. 手动将不合格的代码强制转换为合格

该项目少于300条线。 我很高兴地看到不需要引入命令行工具依赖项来自动执行花费90秒的时间来纠正大多数PR所具有的六到八个括号的过程。

我承认解决错误和PR的速度一直很慢，但这不是由于样式问题引起的，而是由于外部时间压力以及跨许多设备和方案测试变更的复杂性。

我原本打算做的一点是对我的不清楚，对此我感到很抱歉，因为我不得不睁开眼睛看一下代码。

让我们将当前格式与其他两个选项A和B进行比较。

当前：

.table-caption { float:right;
                 clear:right;
                 margin-right: -60%;
                 width: 50%;
                 margin-top: 0;
                 margin-bottom: 0;
                 font-size: 1.0rem;
                 line-height: 1.6; }

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
                                           font-family: et-book-roman-old-style;
                                           position: relative;
                                           vertical-align: baseline; }

.sidenote-number:after { content: counter(sidenote-counter);
                         font-size: 1rem;
                         top: -0.5rem;
                         left: 0.1rem; }

.sidenote:before { content: counter(sidenote-counter) " ";
                   top: -0.5rem; }

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }    

p, footer, table, div.table-wrapper-small, div.supertable-wrapper > p, div.booktabs-wrapper { width: 55%; }

选项A

.table-caption               { float:right;
                               clear:right;
                               margin-right: -60%;
                               width: 50%;
                               margin-top: 0;
                               margin-bottom: 0;
                               font-size: 1.0rem;
                               line-height: 1.6; }

.sidenote-number             { counter-increment: sidenote-counter; }

.sidenote-number::after,
.sidenote::before            { content: counter(sidenote-counter) " ";
                               font-family: et-book-roman-old-style;
                               position: relative;
                               vertical-align: baseline; }

.sidenote-number::after      { content: counter(sidenote-counter);
                               font-size: 1rem;
                               top: -0.5rem;
                               left: 0.1rem; }

.sidenote::before            { content: counter(sidenote-counter) " ";
                               top: -0.5rem; }

blockquote .sidenote,
blockquote .marginnote       { margin-right: -82%;
                               min-width: 59%;
                               text-align: left; }    

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper         { width: 55%; }

选项B：

.table-caption {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-family: et-book-roman-old-style;
  position: relative;
  vertical-align: baseline;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 1rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper {
  width: 55%;
}

一生写了成千上万行CSS，我最习惯于阅读Option B，但是我绝对可以看到像Option A这样的案例。也就是说，我很难理解Option A的功能。可读性不超过当前格式。 当然，正如您所指出的，它少于300行，所以无论哪种方式都没什么大不了的。

在这一点上，我倾向于一些更常规的方法，以使其更具可读性，并且符合更广泛社区中的CSS规范。 选项B似乎对人们来说更加可识别。

我也会选择选项B。 是否没有办法为多个格式化程序/衬纸指定人类可读和机器可读的格式？

我终于解决了这个问题。 感谢您提出这个问题，亚当，并感谢其他所有人增加您的2美分。

请，如果有时间，请看一下提交（https://github.com/edwardtufte/tufte-css/commit/bfbe3b5c50ee450ba09122f1506233edf6a97ffe）并让我知道A）任何缩进或语句是否可以进一步标准化，或者B）您注意到任何实现更改。 （除了手动滚动示例文档外，我没有实现任何测试更改的方法。）

对我来说，@ daveliepmann看起来不错。 我知道找到面对此类老问题的精力是多么困难，因此我们不胜感激！ 我正在将博客重新发布到新站点，因此我将使用这些更改，并在发现任何问题时通知您。

@daveliepmann看起来很棒。 非常感谢您这样做。

@ yb66是否...您的SCSS在附近吗？ 像在github中一样？ 我使用的电子邮件工具在显示HTML MIME零件时允许覆盖样式，并且它使用SCSS。 我很乐意使用Tufte进行此操作，如果有人已经完成了SCSS转换，那将使整个过程变得容易得多。

@serussell CSS不是有效的SCSS吗？

@adamschwartz ：shrug：我没有发生过。 我不是网络开发人员。 但是看来您是对的：SCSS是CSS的超集。 大家好消息！

我可以建议也建议使用短绒！ 当我在此处使用CSS时，Stylelint会像圣诞节一样点亮。 尽管其中一些是样式问题，但也存在许多不一致之处，我们可以轻松消除它们。