根据Wikipedia,编程风格是:
编程风格(也称为代码标准或代码约定)是描述在某些编程语言中编写源代码的约定的术语。
编程风格通常取决于选择编写的编程语言。例如,C 编程语言的风格与 BASIC 语言的风格不同。
在几种语言中,我们可以称之为“官方”的风格指南,就像 PHP 和 Python 一样,尽管它们是推荐的,而不是强制性的标准:
在 HTML、CSS 和 JS 中,我使用 Google 样式指南:
我的问题是:
对于 HTML、CSS 和 JS,还有其他更受认可或“官方”的样式指南吗?
指南的目的是帮助处理琐碎法则,在软件开发中也称为自行车棚效应。
如果您打算以某种方式为某些公共存储库和库(例如karma)做出贡献,则其中一些是必需的。所有这些都有助于使代码易于维护,即使它是由多个开发人员编写的(即使他们彼此没有联系)。
此类指南的另一个原因是帮助处理语言的一些怪异之处。
它们中的许多具有相似之处,例如在
var
函数开头使用以避免提升和不使用eval
.我将提到 JavaScript 中最著名的那些。
康乐福指南
这是浏览器领域的知名人物,其中包括发明JSON和写了一本书“JavaScript, the good parts”。最值得注意的规则是
在不同的行上使用三元运算符
在同一行上使用返回表达式来避免插入自动分号。
jQuery 指南
在块中使用方括号
他们总是使用方括号
{}
,而且总是多行它转变为
一元运算符
一元运算符(例如,!、++)在其运算符中不能有空格
npm 指南
他们不使用分号
;
,除非在极少数情况下循环
for(;;)
。它们是语言所必需的。空循环
while (condición);
(显然不推荐)。语句
case
与 break 位于同一行case 'valor': hazAlgo(); break
在行首的括号
(
或括号前面。[
这可以防止表达式分别被解释为函数调用或属性访问。例子
一开始吃
将长表达式拆分为逗号并将逗号放在开头
JavaScript 标准指南
每行只使用一个 var
总是使用窗户
节点样式指南
使用return减少代码
除非绝对必要,否则不要在函数内部创建函数以避免嵌套
Airbnb指南
它附带了有关SASS、ES6和React等语言和框架的其他详细信息。
当您要将对象属性分配给变量时,请使用解构来访问它们。
始终使用类而不是直接操作原型
惯用语
const
and语句let
应该出现在块的开头使用truthy检查数组和字符串的大小
我敢肯定,随着时间的推移,它们会继续出现。每个 JavaScript 框架也可以创建其样式,因此您可以最终获得混合样式。
CSS 可以参考
https://css-tricks.com/css-style-guides/
http://codeguide.co/#css
https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS
http://primercss.io/guidelines/
https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/
还请记住,您可以选择不使用 CSS,而是使用一些预处理器语言,如Sass、Less和Compass,它们可以有样式指南。
总之,如果您考虑到存在的大量变体,则解决方案是您决定自己的风格。选择其中一个指南并按照它进行操作,如果您认为它不符合您的要求,请更改为另一个指南或根据您的喜好进行小修改。重要的是您和与您一起编写代码的其他人同意一个标准,并且新开发人员可以看到它。
我给你留下来自节点指南的报价
我会告诉您使用此页面上的指南(尽管它们是英文的)http://www.w3schools.com用于 HTML 和 CSS,我通常在有问题或不记得属性时使用它们,它们是伟大的。对于 Javascript,我通常使用https://developer.mozilla.org/es/docs/Web/JavaScript,虽然它来自浏览器,但我觉得它非常完整。无论如何,w3schools 对 Javascript 也很有用,它有一个部分(以及其他部分)。mozilla 也有一个 HTML 和 CSS 部分,分为 3 个级别,这将是链接:https ://developer.mozilla.org/es/docs/Web/Tutorials并选择级别(虽然我通常不看看这个 HTML 和 CSS,我更喜欢 w3school)。
当然,稍后,这取决于您使用的框架等,也许指南中的某些内容不是很有用,但在这种情况下,它会寻找相关框架的指南。
然后,如果这些页面对我不起作用或者我不太了解他们所说的内容,我通常会搜索论坛或解释性网页,例如http://www.aulaclic.es/index.htm或http: //librosweb.es / . 最后一个通常将其他东西的官方指南(如 Bootstrap 3(框架))翻译成西班牙语。
Airbnb开发团队的JavaScript样式指南是最受欢迎和最受好评的指南之一。它有很好的文档记录,并包含许多示例。在那个 repo 中,你还可以找到CSS-in-JavaScript的指南和CSS 和 Sass的指南,它们都非常好。
通过您信任的搜索引擎进行快速搜索,您可以找到HTML、CSS和JavaScript的指南,例如:
对于 JavaScript 的特殊情况,建议您查看ECMAScript标准,该标准给出了语言自己的规范,并使用JSLint工具进行正确编码。
好吧,没有什么比官方消息更好的了:
还有其他具有非常好的样式和完整的分步指南的其他站点:
有一个机构负责更新和创建新的 Web 标准:所谓的W3C或WORLD WIDE WEB Consortium。
W3Schools
是一个在线学习网络技术的流行网站,您可以找到标准HTML
CSS
JavaScript
和其他一些编程语言。它不隶属于W3C
.您可以在每种语言中找到几个最有用的主题:教程、示例和参考。
首先我们来看一下标准
HTML
每个标签都在这里详细解释
HTML
。标签
HTML
按字母顺序排序您还可以验证您的网站
W3C
,以检查您的网站是否符合标准HTML
。标准示例
CSS
您将能够找到
CSS
向我们的网站添加样式所需的所有示例。Podrás también validar tu
CSS
, para comprobar si cumple con los estándares.Ejemplos para estándar
JavaScript
Esta página contiene algunos ejemplos de lo que
JavaScript
puede hacer.JavaScript y HTML DOM referencia:
JQuery
es una bibliotecaJavaScript
.Otros Ejemplos:
Tambien te dejo un página de
W3Schools
con grandes ejemplos utilizandoHTML
,CSS
,JavaScript
yjQuery
(Ejemplos como Slideshow, Modal login, ..., Progress Bars, etc.):Guía de
JavaScript
:https://developer.mozilla.org/es/docs/Web/JavaScript/Guide
Ya que hay excelentes respuestas con explicaciones. Me limitaré a citar algunas de las guías de estilo más usadas y/o conocidas actualmente, ofreciendo los enlaces a cada una de ellas:
HTML/CSS
Javascript
Espero que este 10 + 10 sea útil.