Freecodecamp: 创建freeCodeCamp的CSS样式指南

创建于 2018-01-08 · 47评论 · 资料来源: freeCodeCamp/freeCodeCamp

我想提出freeCodeCamp的CSS样式指南，以提高代码库的整体可维护性。由于FreeCodeCamp有很多贡献者，每个人都以不同的方式编写CSS。而且很难跟踪不同的CSS编写方式。

初步建议：

在启动新的LESS文件时添加注释，以便开发人员知道他们在使用什么，在启动与代码块相关的新部分时也添加注释，这有助于提高可读性，请参见下面的示例（我已经遇到这些代码风格的注释，因此，我想继续编写它，而不是提出一种新的样式）
示例1-启动新的LESS文件时：

//
// Navigation
// --------------------

示例2-添加与导航相关的部分时

//
// Navigation - Mobile Styles
// ------------------------------

间距

在属性后添加空格，将更容易阅读和维护这样的代码库。请参阅下面的示例。
示例1-正确的方法

p {
  color: #fff;
}

示例2-错误的方式
怎么了？
冒号后没有空格

p {
  color:#fff;
}

色彩

首选小写而不是大写。现在，在CSS上，贡献者正在混合使用两者。小写字母书写更快，更容易阅读。如果CSS具有一致的约定，则可以再次提高总体可维护性。另外，如果可能，请缩短十六进制值。请参阅下面的示例。
示例1-正确的方法

p {
  color: #fff;
}

示例2-错误的方式
怎么了？
大写十六进制值，不缩短

p {
  color: #FFFFFF;
}

RGBA或RGB颜色

在值后面添加空格，以提高可读性。请参见下面的示例：
示例1-正确的方法

p {
  color: rgba(123, 123, 0, 0.1);
}

示例2-错误的方式
怎么了？
值后无空格

p {
  color: rgba(123,123,0,0.1);
}

声明0时没有单位

在诸如box-shadow的属性中，如果将值设置为0，则应避免添加单位。请参阅下面的示例。
示例1-正确的方法

p {
  box-shadow: 1px 1px 0 rgb(0, 0, 0);
}

示例2-错误的方式
怎么了？
0后的单位

p {
  box-shadow: 1px 1px 0px rgb(0, 0, 0);
}

避免浮号

如果可能的话，应避免在CSS中使用浮点数进行不同的大小调整，因为这可能会呈现出一些不同的情况。请参阅下面的链接。

浏览器舍入

help wanted docs on the roadmap

资料来源

tomasvn

👍1

最有用的评论

@raisedadead @tomasvn根据我的并遵循CSS样式指南的过程长期不会产生有用的结果。 React，Yarn，Babel和其他许多开源项目都使用Prettier和其他类似的扩展名作为CSS样式格式。

而不是创建样式指南。我们应该告诉我们的贡献者在他们的IDE /代码编辑器中安装Prettier ，我们会很好的。
@raisedadead对此有何想法？

vkWeb 于 2018-01-08

👍6

所有47条评论

@raisedadead你怎么看？

tomasvn 于 2018-01-08

谢谢，您知道有什么办法可以抹掉这些吗？使用任何短绒？

raisedadead 于 2018-01-08

而不是创建样式指南。我们应该告诉我们的贡献者在他们的IDE /代码编辑器中安装Prettier ，我们会很好的。
@raisedadead对此有何想法？

vkWeb 于 2018-01-08

👍6

谢谢，您知道有什么办法可以抹掉这些吗？使用任何短绒？

更漂亮的作品;）。当您违反任何CSS样式规则时，它将向您发出警告。

vkWeb 于 2018-01-08

而不是创建样式指南。我们应该告诉我们的贡献者在他们的IDE /代码编辑器中安装Prettier，我们会很好的。

隐藏在问题之中从来没有帮助过任何人...😅！

我强烈建议避免使用格式化程序，而应使用linters。自动化听起来很酷而且很容易，但是它们消除了编写标准代码的关键。

恕我直言，我们周围的学习社区不应该回避解决由linters指出的代码风格问题。

还请注意，Prettier是_Opinionated_代码格式化程序

raisedadead 于 2018-01-08

👍1

根据我的说法，长期创建并遵循CSS样式指南的过程不会产生有用的结果。

我认为这是一个错误的论点（如果有统计信息，请随时证明我是错误的）。

如果您查看Airbnb JS样式指南，JS标准等，它们会帮助您编写标准代码，并且被成千上万的公司和开发人员每天使用。

raisedadead 于 2018-01-08

@raisedadead我们并没有躲避问题...！我们可以使用linters，但是可以使用Prettier进行一次按键绑定来完成相同的任务，那么为什么我们要花很长时间呢？

vkWeb 于 2018-01-08

我认为这是一个错误的论点（如果有统计信息，请随时证明我是错误的）。
如果您查看Airbnb JS样式指南，JS标准等，它们会帮助您编写标准代码，并且每天都有成千上万的公司和开发人员在使用。

我对此非常同意！他们的JS样式指南确实非常有帮助。

vkWeb 于 2018-01-08

我们并没有躲避问题...！我们可以使用linters，但是可以使用Prettier进行一次按键绑定来完成相同的任务，那么为什么我们要花很长时间呢？

因为，我们要编写标准代码？贡献者可以自由使用他们喜欢的任何工具，但这并不表示我们不需要指南。

raisedadead 于 2018-01-08

无论如何，让该线程在指南上提供建设性反馈，我们总是可以在聊天室中进行讨论。

@tomasvn RFC看起来很有趣，并且由于您对反馈感兴趣，因此您认为可以找到一些可以从中得到启发的既定样式指南和工具。

raisedadead 于 2018-01-08

因为，我们要编写标准代码？贡献者可以自由使用他们喜欢的任何工具，但这并不表示我们不需要指南。

我也和你一起好的，让我们来看一下样式指南，我们可以将linter 。

vkWeb 于 2018-01-08

@raisedadead stylelint看起来不错👍它将警告投稿人文档中的不便之处

tomasvn 于 2018-01-08

👍2

@tomasvn我们刚刚启动了新的课程和学习平台。您是否仍然有兴趣提供帮助？

我们所有的CSS都需要一个良好的重构，这将是一个很好的机会，它不仅可以创建样式指南，而且可以转过来立即将其应用于项目，并确保我们的所有存储库都与之相符。

QuincyLarson 于 2018-06-03

@QuincyLarson当然，我可以花一些时间来帮助您重构CSS，因为freecodecamp是一个很大的代码库，请指出我应该从哪里开始

tomasvn 于 2018-06-03

@tomasvn太神奇了！

freeCodeCamp没有太多的CSS。 freeCodeCamp的CSS主要位于“ main.less”中。我们正在使用Bootstrap 3.0。

我们最终可能会转向Bootstrap 4.0或只是重写CSS以使用Flexbox。但是暂时，我们在几个应用程序上使用React Bootstrap，并且目前已锁定到Bootstrap 3.0。因此，我建议您仅清理并清理main.less中的现有自定义CSS，并减少冗余和合理安排。

QuincyLarson 于 2018-06-03

@QuincyLarson知道了，并且main.less位于client / less / main.less中，这是正确的文件吗？

tomasvn 于 2018-06-03

@tomasvn谢谢您的耐心-我刚刚看到了这个。是的-client / less / main.less应该是正确的文件。

QuincyLarson 于 2018-06-16

@tomasvn需要帮助吗？我很乐意贡献

borisyordanov 于 2018-08-04

@tomasvn您有机会开始从事此工作吗？如果不是， @ borisyordanov是的-我们欢迎您的贡献。

QuincyLarson 于 2018-08-18

@borisyordanov抱歉，请延迟，确定吧，我在Windows上运行dev env时遇到了一些问题，因此您可以开始使用，在修复问题时，我可以帮助您进行重构

tomasvn 于 2018-08-19

@tomasvn我给您发送了一封电子邮件，让我们一起聊天并制定计划。如果您在运行项目时遇到困难，我建议您仔细阅读本指南，或者在Gitter上寻求帮助

borisyordanov 于 2018-08-27

如果仍然需要，我可以帮助您

Jgriebel1990 于 2018-10-31

@ Jgriebel1990我无法与tomasvn联系，所以据我所知没有取得任何进展。随时接管

borisyordanov 于 2018-10-31

@ jgriebel1990随时可以接管，我无法让我的副本在Windows机器上工作，一旦完成，我所能做的就是代码审查

tomasvn 于 2018-10-31

@tomasvn听起来好像@ Jgriebel1990和@borisyordanov没有机会解决这个问题-您是否仍然有兴趣提供帮助？

QuincyLarson 于 2019-01-02

@QuincyLarson我将尝试使其在Windows上运行，但仍然存在运行问题，如果无法设置环境，请关闭线程。

tomasvn 于 2019-01-15

@tomasvn不用担心-让它在本地运行是否有运气？

QuincyLarson 于 2019-01-24

相关： https :

raisedadead 于 2019-02-07

@QuincyLarson不走运，在本地运行

tomasvn 于 2019-02-09

@tomasvn在本地设置时

Nirajn2311 于 2019-02-09

@tomasvn请阅读//github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

borisyordanov 于 2019-02-11

@raisedadead随着https://github.com/freeCodeCamp/design-style-guide的更新，是否需要此问题？

RandellDawson 于 2019-05-03

路线图上的更多内容。最终，它将成为我们UI组件的中心资源。

raisedadead 于 2019-05-03

CSS边框样式
border-style属性指定要显示的边框类型。

允许以下值：

点线-定义点线边框
虚线-定义虚线边框
实心-定义实心边框
double-定义双边框
坡口-定义3D坡口边框。效果取决于边框颜色值
脊线-定义3D脊线边框。效果取决于边框颜色值
插图-定义3D插图边框。效果取决于边框颜色值
起始-定义3D起始边框。效果取决于边框颜色值
无-定义无边框
隐藏-定义隐藏边框
border-style属性可以具有一到四个值（用于顶部边框，右侧边框，底部边框和左侧边框）。

例-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

rohaanmd 于 2019-10-02

嘿! 这方面有什么进展？我可以提供帮助！

ManasMahanand 于 2020-10-04

@ManasMahanand ，谢谢您的关注。
如果您可以调查可用的CSS短绒棉机，进行比较，看看是否有比stylelint更好的机器，那就太好了。
然后，将短绒棉绒添加到我们的仓库中，并更改CSS文件，以确保仓库没有掉毛。

ahmadabdolsaheb 于 2020-10-05

@madabdolsaheb会做！

ManasMahanand 于 2020-10-06

👍1

@ahmadabdolsaheb等待你是什么意思添加到回购？

您是否希望我将linter安装为依赖项，例如eslint已经存在？

还是有一种在github本身上安装测试的方法，因此除非遵循样式指南，否则不允许合并？