Part 2: In-Depth Guide On WordPress Coding Standards For CSS & JS

Part 2: In-Depth Guide On WordPress Coding Standards For CSS & JS:Hello.! All and Welcome to another edition our blog series on WordPress Coding Standards. In the previous edition of our series i.e. Part 1, we had discussed the WordPress Coding Standards for PHP & HTML. Today, we’re going to discuss the Part 2 of our series which is based on the WordPress Coding Standards for CSS & JS. So, let’s not waste any time & straightway get into the action.

WordPress Coding Standards For CSS 1. Structure If you’re utilizing working in a Web Design Company for a long time, then you must be knowing that there are many methods for structuring the CSS. Now, one thing is very clear that when you’re using CSS, you need to retain a high degree of readability.

Here are some things that you need to keep in mind while using CSS for WordPress: ● ● ● ●

Use tabs and not spaces for proper indentation.

Add 2 blank line between section & 1 blank line between the block in section.

Each selector should be on one line, either ending with a comma or a closing braces (}).

For a property-value pair, maintain it on one line with one tab indentation & always end it with a semicolon. ● The closing braces (}) should be left aligned & follow the same indentation as opening braces ({).

Example: -> Incorrect #selector-1, #selector-2 { background: #fff; color: #111; }

-> Correct #selector-1, #selector-2 { background: #fff; color: #111; } #selector-1 { background: #fff; color: #000; }

2. Selectors The broad selectors allow you to be efficient, while the location-specific selectors allow you to save plenty of time. However, this type of approach can have adverse consequences and can lead to a cluttered CSS. Here’s what you can do to find the right balance between overall style & DOM layout: ● Always use lowercase & separate the words with a hyphen. Avoid using camelcase & underscores. ● Always use human-readable selectors. ● For attribute selectors, use double-quotes around the values. ● Don’t use overqualified selectors.

Example: -> Incorrect #commentForm { /* camelcase. */ margin: 0; } #comment_form { /* Underscores. */ margin: 0; } div#comment_form { /* Over-qualification. */ margin: 0; } input[type=text] { /* Should be [type="text"] */ line-height: 130% }

-> Correct

#comment-form { margin: 1em 0; } input[type="text"] { line-height: 1.3; }

3. Properties For properties, you need to keep the following things in your mind: ● All the properties should be followed by a colon & space. ● All the properties & its values should be in lowercase. ● Use hex code for colors or rgba() for opacity. Try to avoid the RGB format & uppercase and use the shorten values whenever possible. ● Use shorthand for background, border, font, list-style, margin, and padding values as much as possible.

Example: -> Incorrect #selector-1 { background:#FFFFFF; margin-left: 10PX; margin: 0; }

-> Correct #selector-1 { background: #fff; margin: 0; margin-left: 10px; } ```

4. Property Ordering In the WordPress Core, our choice is to go for logical or grouped ordering. However, for properties, you should group them by meaning and ordered them specifically within the groups.

The properties within the groups are strategically ordered to create smooth transition among the various sections. The baseline or ordering is: ● ● ● ● ●

Display Positioning Box model Colors and Typography Other

Top/Right/Bottom/Left (TRBL/trouble) should be the order for any relevant properties (e.g. margin), Corner specifiers (e.g. border-radius-*-*) should be top-left, top-right, bottom-right, bottom-left.

Here’s how you can order the shorthand values: Example: #overlay { position: absolute; z-index: 2; padding: 20px; background: #fff; color: #767; }

Another method which is used often in WordPress for ordering is to order the properties by alphabetical order.

Example: #overlay { background: #fff; color: #767; padding: 20px; position: absolute; z-index: 1; }

5. Vendor Prefix WordPress uses Autofixer as a pre-commit tool which helps you in managing the browser specific prefix. Therefore, you don’t need to manage the vendor prefix explicitly. As far as the indentation is concerned, you need to make use of tabs and not spaces as discussed earlier.

6. Values Here’s what you need to follow while assigning an input value for any CSS property: ● ● ● ● ● ● ● ● ●

Always put space before the colon & after the value.

Never pad any parentheses with spaces.

Always end any value with a semicolon.

Use double quotes rather than single quotes & only when needed.

Font weights should be defined using a numeric value.

0 value should not have any unit unless necessary.

Line height should be unit-less.

Always use leading zeros for decimal values.

Multiple values for one property should be separated by either a space or a newline.

Example: -> Incorrect .class { /* Missing Space & Semicolon */ background:#fff } .class { /* Added A Unit On Zero */ margin: 0px 10px 0px; } .class { font-family: Times New Roman, serif; /* Font Names Not Quoted */ font-weight: italic; /* Font Weights Shouldn't Have Names */ line-height: 1.7em; }

-> Correct .class { background-image: url(images/bg.png); font-family: "Helvetica Neue"; /* Correct usage of quotes */ font-weight: 700; } .class { font-family: Georgia; line-height: 1.5;

}

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #fff; /* Correct usage of zero values */

7. Media Queries Media Queries allows you to degrade DOM for the various screen size. Here’s what you need to keep in mind while utilizing the media queries in your CSS for WordPress: ● Always keep media queries grouped by media at the end of any CSS. ● Rule sets for media queries should be indented one level in.

Example: @media all and (max-width: 702px) and (min-width: 3400px) { ```

/* Your selectors */ }

8. Commenting ● You can comment liberally. However, if you’re concerned about the file size, you should use minified files & SCRIPT_DEBUG constant. ● Long comments should be broken into line wise with each line consisting maximum of 80 characters. ● If you’ve very long CSS, then you should utilize a table of contents. ● Section/Subsection headers should have newlines before & after. ● Inline comments shouldn’t have empty newline separating the comment.

Example: -> For Section & Subsection /** * #.# Title Of Section * * Description of section */ ```

.selector { float: right; }

-> For Inline /* This is a comment */ .another-selector { position: absolute; top: 0 !important; /* I should explain why this is so !important */ } ```

9. Best Practices ● If you’re trying to fix an issue in your CSS, try to remove the unnecessary code rather than adding more code. ● DOM gets changed over a period of time and therefore, target the element you want to use.

Don’t try to find it through its parents. For example: Use .highlight instead of .highlight a. ● Knowing when to use property height is important. You should use it while including the outside elements. ● Don’t use the default property-value combinations.

WordPress Coding Standards For JS 1. Spacing Here are the guidelines that need to be followed for spacing in Javascript for WordPress: ● Always make use of tabs for good indentation. ● No whitespace at the end of the line. ● No line should be longer than 80 characters & shouldn’t exceed 100 (counting tabs as 4 spaces). ● You should always use braces for if/else/for/while/try blocks. ● Unary operators (e.g., ++, --) shouldn’t have space next to their operand. ● Any “,” & “;” must not have a preceding space. ● Any “;” used as a statement terminator should be at the end of a line. ● Any “:” after the property name shouldn’t have a preceding space. ● “?” & “:” in a ternary condition shouldn’t have space on both sides. ● No filler space for empty constructs ({}, [], fn()). ● There should be a newline at the end of each file. ● Any “!” operator should have the following space. ● All the function bodies should be indented by one tab. ● Spaces can be used to align the code in the documentation, but you should only use tabs at the start of every file.

Example: var I; ```

if ( condition ) { doSomething( 'with a string' ); } else if ( otherCondition ) { otherThing( { key: value, otherKey: otherValue } ); } else { somethingElse( true ); }

2. Objects The object declaration can be made on a single line if they’re short. However, if it’s too long, then you should write one property per line. Any property name should be quoted if it is a reserved word or it contains special characters.

Example: var map = { ready: 11, when: 14, 'you are': 15 }; var map = { ready: 11, when: 14, 'you are': 15 };

3. Array & Function Calls Always include extra spaces around elements & arguments: Example: array = [ a, b, c ]; ```

foo( arg ); foo( 'string', object ); foo( node, 'property', 3 );

4. Semicolons Always use semicolons explicitly. Never rely on Automatic Semicolon Insertion (ASI).

5. Indentation & Line Break Indentation & line breaks make your code more readable than ever before. Tabs should always be used for the indentation purpose.

Example: (function( $ ) { function doSomething() { } })( jQuery );

A. Blocks & Curly Braces if, else, for, while, and try blocks should always use braces, and always go on multiple lines. The { should be on the same line as the function definition, the conditional, or loop. The } should be on the line directly after the last statement of the block.

Example: var A, B, C; if ( myFunction() ) { } else if ( ( A && B ) || C ) { } else { }

B. Multi-Line Statements When the statement is too long to be fit onto one line, line breaks must occur after an operator.

Example:

var html = '<p>The sum of ' + A + ' and ' + B + ' plus ' + C + ' is ' + ( A + B + C ) + '</p>';

Always break the line into logical groups as it improves readability.

Example: var ab = firstCondition( foo ) && secondCondition( bar ) ? qux( foo, bar ) : Foo; ```

When a condition is too long to be fit on one line, successive lines must be intended one extra level to improve the human readability.

Example: if ( firstCondition() && secondCondition() && thirdCondition() ) { doThis(); }

C. Chained-Method Calls When a chain of the method call is too long to be fit on a single line, you should keep one function call per line with the first call on a separate line from the object.

Example: elements .addClass( 'foo' ) .children() .end();

6. Assignments & Globals A. Declaring Variables With Var Every function should begin with a single comma-delimited var statement. Assignments with var statement should be listed on the individual lines, while declaration can be grouped on a single line.

Objects & functions should be assigned outside of var statement.

Example:

var k, m, height, width, // indent lines by one tab value = 'WordPress';

B. Globals All the globals used in a file should be documented at the top of the file. If you’re declaring multiple globals, then separate them by a comma.

Example: /* global pwdStrength:true */

Here, pwdStrength is assigned a boolean value “true” which means it is defined within this file. If the global is defined some other file, you should omit “:true” from the above statement.

C. Common Libraries Backbone, jQuery, Underscore, and the global wp object are all registered as allowed globals in the root .jshintrc file. Backbone & Underscore can be accessed directly at any time, while for accessing jQuery you should use $ and pass the jQuery into an anonymous function.

Example: function( $ ) { // Expressions })( jQuery );

7. Naming Conventions All the variables and function names should be in camelcase with the first letter in lowercase. For constructors, you should have a camelcase with the first letter in uppercase. All the names should be descriptive.

8. Comments Comments which come before a code to prescribe its intention should be preceded by a black space. Always capitalize the first letter of comment. There should be a space between comment token (//) and comment text.

Example:

-> Single-Line Comments someStatement(); // Comment explaining the following thing $( 'p' ).doSomething();

-> Multi-Line Comments /* * This is a comment that is long enough to warrant being stretched * over the span of multiple lines. */

-> Inline Comments function foo( selector, data, /* INTERNAL */ one ) { // Do stuff } ```

9. Equality Always use strict equality checks (===) instead of using abstract equality checks (==). The expectation is when you’re checking for both undefined & null by way of null.

Example: if ( undefOrNull == null ) { // Expressions } ```

10. Type Checks Below is the preferred way of checking the type of an object: ● ● ● ● ● ● ● ●

String: typeof object === 'string' Number: typeof object === 'number' Boolean: typeof object === 'boolean' Object: typeof object === 'object' or _.isObject( object ) Plain Object: jQuery.isPlainObject( object ) Function: _.isFunction( object) or jQuery.isFunction( object ) Array: _.isArray( object ) or jQuery.isArray( object ) Element: object.nodeType or _.isElement( object )

● null: object === null ● null or undefined: object == null ● Undefined: ○ Global Variables: typeof variable === 'undefined' ○ Local Variables: variable === undefined ○ Properties: object.prop === undefined ○ Any of the above: _.isUndefined( object )

11. Strings Always use a single quote for string literals: Example: var my1 = 'Xavier';

When a string contains a single quote, you need to escape that with a backslash ( \ ): Example: var my2 = 'The name of my school is \ ‘ HBK ’';

12. Switch Statement When you’re using a switch statement, use a break for each case barring default. Indent case statements one tab within the switch.

Example: switch ( event.keyCode ) {

}

// ENTER and SPACE both trigger x() case $.ui.keyCode.ENTER: case $.ui.keyCode.SPACE: x(); break; case $.ui.keyCode.ESCAPE: y(); break; default: z();

13. Best Practices A. Arrays To create an array in Javascript, you should use shorthand ‘[]’ instead of new Array() notation.

Example: var anArray = []; ```

You can also initialize the array during construction.

Example: var my2 = [ 1, 'WordPress', 2 ]; ```

In addition to all these, for Javascript associative arrays are defined as an object.

B. Objects There are many ways to create an object in Javascript. Out of that ‘Object Literal Notation’ {} is the most preferred method.

Example: var myObj = {};

When an object requires a specific prototype, the object should be created via calling a constructor function with new.

Example: var myObj = new ConstructorMethod(); ```

To access the properties of an object, use the dot notation (.) unless the key is a variable or reserved word or a string which is not a valid identifier.

Example: prop = object.propertyName; prop = object[ variableKey ]; prop = object['default'];

C. Yoda Conditions Whenever you’re comparing an object with a string, boolean, integer, or other constant or literal, the variable should always be placed on the right-hand side and the constant or literal should be put on the left-hand side.

Example: if ( true === myCondition ) { // Do stuff }

D. Iteration When you’re iterating over a large a for loop, it is recommended that you should store loop’s maximum value as a variable rather than re-computing it every time.

Example: var i, max; for ( i = 0, max = getItemCount(); i < max; i++ ) { } ```

D. Iterating Over jQuery Collections When you’re iterating over a collection of jQuery objects, jQuery should be utilized for iteration: Example: $tabs.each(function( index, element ) { var $element = $( element ); // Do stuff });

Closing Thoughtsâ&#x20AC;Ś Every programming language has its own coding standards which need to be followed by the programmer in order to enhance the readability of the code. The same is the case with WordPress, where there are coding standards for PHP, HTML, CSS & JS. Here, we have tried to provide you with an in-depth guide on WordPress Coding Standards For CSS & JS which will help you in future when you're working with WordPress.

If youâ&#x20AC;&#x2122;ve any question or suggestion regarding this subject, then do mention them in our comment section. Thank You! Originally Published at esparkinfo.com