Issue 3158 - Add CSS and HTML rules to coding style page

pages/coding-style.html

 title=Coding Style
 
 
 <h2 id="precedence">{{s1 Precedence}}</h2>
 
 <p>{{s2 The Adblock Plus coding style is based on others. Our rules (both general and language specific) always overrule referenced style guides. The language specific sections overrule the general section.}}</p>
 
 <h2 id="consistency">{{s3 Consistency}}</h2>
 
 <p>{{s4 Consistency is most important: Be consistent within functions, files, modules and projects. Making existing code conform with this style guide is fine, but it should happen in dedicated commits, preferably for a whole module or project at once.}}</p>
 
 <h2 id="general">{{s5 General}}</h2>
 <ul>
-<li>{{s6 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#General_C.2FC.2B.2B_Practices">general practices</a> and its <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Naming_and_Formatting_code">naming and formatting rules</a>.}}</li>
-<li>{{s7 Use 2 spaces per indentation level.}}</li>
-<li>{{s8 All files should have a <a href="license-headers">license header</a>, but no mode line comments.}}</li>
-<li>{{s9 Newline at end of file, otherwise no trailing whitespace.}}</li>
-<li>{{s10 Lines can be longer than the limit, if limiting line length would hurt readability in a particular case.}}</li>
-<li>{{s11 Opening braces always go on their own line.}}</li>
-<li>{{s12 No hungarian notation, no special variable name prefixes or suffixes denoting type or scope. All variable names start with a lower case letter.}}</li>
-<li>{{s13 Don't comment code out, delete it.}}</li>
-<li>{{todo-comments Don't add TODO comments, create an <a href="https://issues.adblockplus.org">issue</a> and reference it in a comment instead.}}</li>
+  <li>{{s6 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#General_C.2FC.2B.2B_Practices">general practices</a> and its <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Naming_and_Formatting_code">naming and formatting rules</a>.}}</li>
+  <li>{{s7 Use 2 spaces per indentation level.}}</li>
+  <li>{{s8 All files should have a <a href="license-headers">license header</a>, but no mode line comments.}}</li>
+  <li>{{s9 Newline at end of file, otherwise no trailing whitespace.}}</li>
+  <li>{{s10 Lines can be longer than the limit, if limiting line length would hurt readability in a particular case.}}</li>
+  <li>{{s11 Opening braces always go on their own line.}}</li>
+  <li>{{s12 No hungarian notation, no special variable name prefixes or suffixes denoting type or scope. All variable names start with a lower case letter.}}</li>
+  <li>{{s13 Don't comment code out, delete it.}}</li>
+  <li>{{todo-comments Don't add TODO comments, create an <a href="https://issues.adblockplus.org">issue</a> and reference it in a comment instead.}}</li>
 </ul>
 
 <h2 id="javascript">{{s14 JavaScript}}</h2>
 <ul>
-<li>{{s15 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices">JavaScript practices</a>.}}</li>
-<li>{{s16 Opening braces of object literals in don't go on their own line when that would cause a syntax error.}}</li>
-<li>{{s17 Use <code>bind()</code> to ensure the desired value of the <code>this</code> variable, don’t use temporary variables as a replacement.}}</li>
-<li>{{s18 In classes, prefix private functions with a single underscore to make them pseudo-private.}}</li>
+  <li>{{s15 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices">JavaScript practices</a>.}}</li>
+  <li>{{s16 Opening braces of object literals in don't go on their own line when that would cause a syntax error.}}</li>
+  <li>{{s17 Use <code>bind()</code> to ensure the desired value of the <code>this</code> variable, don’t use temporary variables as a replacement.}}</li>
+  <li>{{s18 In classes, prefix private functions with a single underscore to make them pseudo-private.}}</li>
 </ul>
 
 <h2 id="html-css">{{html-css HTML and CSS}}</h2>
 <ul>
-<li>{{html-css1 Follow the <a href="https://google.github.io/styleguide/htmlcssguide.xml">Google HTML/CSS Style Guide</a>.}}</li>

[Thomas Greiner, 2015/11/10 09:51:00]

Please use descriptive identifiers instead of numbers that seem dependent on the
order of the items (e.g. `html-css-general`).

[Thomas Greiner, 2015/11/10 09:51:00]

Don't forget about indentation. The Objective-C list shows how it should be.

The reason why the other lists are not properly indented is because those were
created in Anwiki.

[saroyanm, 2015/11/10 10:20:07]

Done.

[saroyanm, 2015/11/10 10:20:07]

Done, also added indentation to other elements.

-<li>{{html-css2 Use double over single quotation marks.}}</li>
-<li>{{html-css3 Don't omit optional HTML tags.}}</li>
-<li>{{html-css4 CSS color values should be specified in hexadecimal where possible.}}</li>
-<li>{{html-css5 CSS shorthand properties usage is optional.}}</li>
-<li>{{html-css6 CSS rule declaration order should follow the <a href="https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#property-ordering">WordPress CSS Coding Standards</a>.}}</li>
-<li>{{html-css7 CSS number values should specify units where possible.}}</li>
-<li>{{html-css8 CSS number values between -1 and 1 should specify a leading 0.}}</li>
+  <li>{{html-css-general Follow the <a href="https://google.github.io/styleguide/htmlcssguide.xml">Google HTML/CSS Style Guide</a>.}}</li>
+  <li>{{html-css-quotation Use double over single quotation marks.}}</li>
+  <li>{{html-css-optional-tag Don't omit optional HTML tags.}}</li>
+  <li>{{html-css-hexadecimal CSS color values should be specified in hexadecimal where possible.}}</li>
+  <li>{{html-css-shorthand CSS shorthand properties usage is optional.}}</li>
+  <li>{{html-css-order CSS rule declaration order should follow the <a href="https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#property-ordering">WordPress CSS Coding Standards</a>.}}</li>
+  <li>{{html-css-units CSS number values should specify units where possible.}}</li>
+  <li>{{html-css-leading-zero CSS number values between -1 and 1 should specify a leading 0.}}</li>
 </ul>
 
 <h2 id="python">{{s19 Python}}</h2>
 <ul>
-<li>{{s20 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Python_Practices">Python practices</a>.}}</li>
-<li>{{s21 In modules, prefix private functions and variables with a single underscore.}}</li>
+  <li>{{s20 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Python_Practices">Python practices</a>.}}</li>
+  <li>{{s21 In modules, prefix private functions and variables with a single underscore.}}</li>
 </ul>
 
 <h2 id="java">{{s22 Java}}</h2>
 <ul>
-<li>{{s23 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Java_practices">Java practices</a>.}}</li>
-<li>{{s24 Imports should be organised consistently per file, we don't use global rules.}}</li>
+  <li>{{s23 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#Java_practices">Java practices</a>.}}</li>
+  <li>{{s24 Imports should be organised consistently per file, we don't use global rules.}}</li>
 </ul>
 
 <h2 id="cpp">{{s25 C++}}</h2>
 <ul>
-<li>{{s26 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#C.2FC.2B.2B_practices">C++ practices</a>.}}</li>
-<li>{{s27 Indent namespace bodies.}}</li>
-<li>{{s28 Avoid manual memory management: Use references and values when possible, smart pointers when necessary, raw pointers only for weak references.}}</li>
-<li>{{s29 Don't use C-style casts unless its exact semantics are required.}}</li>
-<li>{{s30 We tend to use anonymous namespaces instead of static.}}</li>
+  <li>{{s26 Follow the Mozilla Coding Style's <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style#C.2FC.2B.2B_practices">C++ practices</a>.}}</li>
+  <li>{{s27 Indent namespace bodies.}}</li>
+  <li>{{s28 Avoid manual memory management: Use references and values when possible, smart pointers when necessary, raw pointers only for weak references.}}</li>
+  <li>{{s29 Don't use C-style casts unless its exact semantics are required.}}</li>
+  <li>{{s30 We tend to use anonymous namespaces instead of static.}}</li>
 </ul>
 
 <h2 id="objc">{{objective-c Objective-C}}</h2>
 <ul>
   <li>{{objc-conventions Follow Apple's <a href="https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Conventions/Conventions.html">conventions</a>}}.</li>
 </ul>
 
 <h2 id="puppet">{{s31 Puppet}}</h2>
 <ul>
-<li>{{s32 Follow the <a href="http://docs.puppetlabs.com/guides/style_guide.html">Puppet Style Guide</a>.}}</li>
-<li>{{s33 Opening braces don't go on their own line.}}</li>
-<li>{{s34 Arrows should not be aligned.}}</li>
+  <li>{{s32 Follow the <a href="http://docs.puppetlabs.com/guides/style_guide.html">Puppet Style Guide</a>.}}</li>
+  <li>{{s33 Opening braces don't go on their own line.}}</li>
+  <li>{{s34 Arrows should not be aligned.}}</li>
 </ul>