Every programming language has its own coding standards which need to be followed by any WordPress Development Company 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.

1. 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.

2. ● 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.

3. 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.

4. 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.

5. 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.

6. ● 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. 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
*/

8. .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.

9. ● 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
};

10. 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

11. 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.

12. 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.

13. 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:

14. -> 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'

15. ● 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:

16. 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.

17. 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.

18. 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
});

19. Closing Thoughts…
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’ve any question or suggestion regarding this subject, then do mention them in
our comment section. Thank You!
Originally Published at esparkinfo.com