Quick contact info

Introducing a truly professional WordPress theme built to last! We developed Wilmër for all construction & architecture sites.

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

By Piyali Sarkar WordPress 66 Views

Hello.! All and Welcome to another edition our blog series on WordPress Coding Standards. In the previous version of our series, i.e., Part 1, we had discussed the WordPress Coding Standards for PHP & HTML.

Today, we’re going to discuss Part 2 of our series 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

coding & CSS

1. Structure

If you’re utilizing working in a Web app development company for a long time, then you must be knowing that there are many methods for structuring the CSS. Now, one thing is evident 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 two 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 will enable 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 :

  • A colon & space should follow all the features.
  • 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 arrange 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 maintain 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 amount.
  • 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.
  • Either space or a newline should separate multiple values for one property.
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 some 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 essential. You should use it while including the outside elements.
  • Don’t use the default property-value combinations.

Read also: Top 10 WordPress Security Vulnerabilities That Gives You Sleepless Nights & The Ways To Fix Them

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 proper indentation.
  • No whitespace at the end of the line.
  • No line should be longer than 80 characters & shouldn’t exceed 100 (counting tabs as four spaces).
  • You should always use braces for if/else/for/while/try
  • Unary operators (e.g., ++,  –) shouldn’t have space next to their operand.
  • Any “,”& “;” must not have the other space.
  • Any “;” used as a statement terminator should be at the end of a line.
  • Any “: ”after the property name shouldn’t have another 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 indent 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. You should always quote any property name 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

To know more about this, you can Hire WordPress Developer. 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. You should always use tabs 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 you can group declaration 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 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 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 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 precede the 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 : isPlainObject( object )
  • Function : isFunction( object) or jQuery.isFunction( object )
  • Array : isArray( object ) or jQuery.isArray( object )
  • Element : 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, you should create the object by 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 you should put the constant or literal on the left-hand side.

Example :

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

D. Iteration

When you’re iterating over a large a for loop, 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++ ) {
}

E. Iterating Over jQuery Collections

When you’re iterating over a collection of jQuery objects, you should utilize jQuery should for iteration:

Example :

$tabs.each(function( index, element ) {
var $element = $( element );

// Do stuff
});

Conclusion

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

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Piyali Sarkar

Piyali Sarkar

Piyali, an M.Tech in CSE, has experience ranging from an assistant professor to creative writing in the local newspapers, she has stepped fully into the domain of mobile application development. Her writing can be said to be a combo of crazy thought process, efficacious vocab & sublime modus operandi. She pens down her thought for eSparkBiz @Mobile App Development Company where you can Hire Mobile App Developer. In an app-centric world, having a hot app-o-lava in her mind, she loves sharing her diegesis.

Search

Follow us

Subscribe Newsletter

Call us Today

Got any Questions?
call us Today!

+1 408 850 1488 [email protected]

Related Post

Top 8 Cryptocurrency & Bitcoin Plugins For WordPress

Top 8 Cryptocurrency & Bitcoin Plugins For WordPress

“BITCOIN is a remarkable cryptographic achievement and the ability to create something that is not duplicable in the digital world has enormous value.” - Eric…

How To Make Millions By Starting A Travel Blog In WordPress – 2019?

How To Make Millions By Starting A Travel Blog In WordPress – 2019?

It clearly shows that you should also opt for WordPress for starting your travel blog. Taking this into consideration, today we’re going to provide you…

11 Simple Strategies To Make Your WordPress Website Accessible

11 Simple Strategies To Make Your WordPress Website Accessible

Web Accessibility Guidelines Web Accessibility means everyone who visits your website should be able to access everything. Even if the person has a condition that…