According to Wikipedia , the programming style is:
Programming style (also called code standards or code convention) is a term that describes conventions for writing source code in certain programming languages.
Programming style is often dependent on the programming language chosen to write. For example, the style of the C programming language will vary from that of the BASIC language.
In several languages there are style guides that we could call "official" as in the case of PHP and Python, although they are a recommendation, not a mandatory standard:
In HTML, CSS and JS I use the Google style guides:
My question is:
Are there other more recognized or "official" style guides for HTML, CSS and JS?
The purpose of the guides is to help deal with the Law of Triviality , also known in software development as the bike shed effect .
Some of these are required if you intend to contribute in some way to some public repositories and libraries (eg karma ). All of this helps make the code easy to maintain even if it's written by multiple developers (even if they don't have contact with each other).
Another reason for such guides is to help deal with some of the weirdness of languages.
Many of them share similarities like using at
var
the beginning of functions to avoid hoisting and not using theeval
.I'm going to mention the most notable ones for JavaScript.
Crockford Guide
This is a well-known character in the world of browsers, among other things for having invented JSON and for having written a book "JavaScript, the good parts" . The most notable rules are
Using the ternary operator on different lines
Use of the return expression on the same line to avoid the insertion of the automatic semicolon.
jQuery Guide
Using square brackets in blocks
They always use square brackets
{}
and they always go on multiple linesIt transforms in
unary operators
Unary operators (eg, !, ++) must not have spaces with respect to their operator
npm guide
They do not use semicolons
;
except on rare occasionsCycles
for(;;)
. They are required by the language.Null cycles
while (condición);
(Obviously not recommended).Statement
case
on the same line as the breakcase 'valor': hazAlgo(); break
In front of a parenthesis
(
or bracket[
at the beginning of the line. This prevents the expression from being interpreted as a function call or property access, respectively.Example
eat at first
Split a long expression into its commas and put the commas at the beginning
JavaScript Standard Guide
Use only one var per line
always use window
node style guide
Use return to reduce code
Don't create functions inside functions to avoid nesting unless strictly necessary
airbnb guide
It comes with additional details for languages and frameworks like SASS , ES6 and React .
Use destructuring to access object properties when you want to assign them to variables.
Always use classes instead of manipulating the prototype directly
idiomatic
The
const
and statementslet
should appear at the start of your blockUse truthy to check sizes of arrays and strings
I'm sure there are more and over time they can continue to emerge. Each JavaScript framework can create its style as well so you can end up with mixed styles.
For CSS you can refer to
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/
Also remember that you can choose not to work with CSS, but with some preprocessor language like Sass , Less and Compass that can have style guides.
In conclusion, if you take into account the large number of variants that exist, the solution is that you decide on your own style . Choose one of the guides and follow it, if it seems to you that it does not fit what you want, change to another or make small modifications to your liking. The important thing is that you and the others who write code with you agree to a standard and that it is visible to new developers.
I leave you a quote from the node guide
I would tell you to use the guides on this page (although they are in English) http://www.w3schools.com for HTML and CSS, I usually use them when I have questions or don't remember a property and they are great. For Javascript I usually use https://developer.mozilla.org/es/docs/Web/JavaScript which, although it is from a browser, I find it quite complete. Anyway, w3schools is also useful for Javascript, it has a section for it (and for other things too). The mozilla one also has a section for HTML and CSS divided into 3 levels, this would be the link: https://developer.mozilla.org/es/docs/Web/Tutorials and choose the level (although I don't usually look at this for HTML and CSS, I prefer w3school).
Of course, later, it depends on the frameworks etc that you use, perhaps some things in the guides are not very useful, but in those cases it would be to look for the guide of that framework in question.
Then, if those pages don't work for me or I don't know much about what they say, I usually search through forums or explanatory web pages such as http://www.aulaclic.es/index.htm or http://librosweb.es / . The last one usually translates the official guides of other things like Bootstrap 3 (framework) to Spanish.
One of the most and best-received style guides for JavaScript is that of the Airbnb development team . It is very well documented and consists of numerous examples. In that repo you will also find a guide for CSS-in-JavaScript and another for CSS & Sass that are very good.
With a quick search through your trusted search engine you can find guidelines for HTML , CSS and JavaScript such as:
For the particular case of JavaScript, it is recommended that you review the ECMAScript standard, which gives the language's own specification, and use the JSLint tool for correct coding.
Well, there is nothing better than official sources:
There are other additional sites with very good styles and a complete step-by-step guide:
There is a body in charge of updating and creating new web standards: the so-called W3C or WORLD WIDE WEB Consortium .
W3Schools
is a popular website for learning web technologies online you can find the standardHTML
CSS
JavaScript
and some other programming language. It is not affiliated with theW3C
.You can find several topics on each language, the most useful: Tutorials, Examples and References.
First, let's look at the standard
HTML
Each tag is explained in detail here
HTML
.Labels
HTML
sorted alphabeticallyYou can also validate your website in
W3C
, in order to check if your website complies with the standardsHTML
.Examples for standard
CSS
You will be able to find all the necessary examples to add styles
CSS
to our websites.You can also validate your
CSS
, to check if it meets the standards.Examples for standard
JavaScript
This page contains some examples of what you
JavaScript
can do.JavaScript and HTML DOM reference:
JQuery
it is a libraryJavaScript
.Other examples:
I also leave you a page
W3Schools
with great examples usingHTML
,CSS
,JavaScript
andjQuery
(Examples like Slideshow, Modal login, ..., Progress Bars, etc.):Guide from
JavaScript
:https://developer.mozilla.org/es/docs/Web/JavaScript/Guide
Since there are excellent answers with explanations. I will limit myself to citing some of the most used and/or known style guides currently, offering links to each of them:
HTML/CSS
JavaScript
I hope this 10 + 10 is helpful.