Drupal Coding Standards

PHP code standards are based on PEAR. Here are the most crucial ones:

1. Use 2-space indentation, no tabs.

2. Lines should not contain trailing whitespace.

3. All blocks at the beginning of the PHP file should be separated by a blank line.

The heading can look as follows:

<?php
namespace This\Is\The\Namespace;
use Drupal\foo\Bar;
/**
* Provides examples.
*/
class ExampleClassName {

4. A single code line should not contain over 80 characters, except for lines containing longer function names, function/class definitions, variable declarations, etc.

5. Function names should be written in lowercase and an underscore should separate words. Functions should contain group/module names as a prefix to avoid name clashes between modules.

6. Variables should be named in lowercase, and words should be separated by uppercase letters (example: $lowerCamelCase) or underscores (example: $snake_case). Be consistent and do not mix camelCase and snake_case variable names.

Operators

All binary operators, such as +, -, =, !=, ==, >, etc., should have a space before and after the operator. For example, an assignment should be formatted as $foo = $bar.

Unary operators (e.g., ++) should not contain spaces between the operator and the variable or number they operate on.

Conditional Statements and Loops

Control statements should contain one space between the keyword and the opening bracket to distinguish them from function triggers.

Always use curly brackets in control statements, even when they are optional. They improve readability and reduce the likelihood of errors when adding new lines.

1. The opening curly bracket should be in the same verse as the opening statement, preceded by one space.
2. The closing curly bracket should be added on a separate line and indented to the same level as the opening statement.

Exemplary if else statement structure:

 if (condition1 || condition2) {
   action1;
 }
 elseif (condition3 && condition4) {
   action2;
 }
 else {
   defaultaction;
 }

Exemplary switch statement structure:

 switch (condition) {
   case 1:
     action1;
     break;
    case 2:
     action2;
     break;
    default:
     defaultaction;
 }

Exemplary while loop statement:

 do {
   actions;
 } while ($condition);

Function Triggering

Functions must be activated without spaces separating the function name from the opening bracket and first parameter, with no spaces between commas and each parameter, and with no spaces between the last parameter, the closing bracket, and the semicolon. Here is an example:

$var = foo($bar, $baz, $quux);

Arrays

Arrays are declared using a short syntax with spaces separating each element after a comma. If there is an assignment operator =>, you must add a space before and after the operator, e.g.:

$array = ['hello', 'world', 'foo' => 'bar'];

If the array declaration exceeds 80 characters, you must divide it into several lines, e.g.:

$form['title'] = [
   '#type' => 'textfield',
   '#title' => t('Title'),
   '#size' => 60,
   '#maxlength' => 128,
   '#description' => t('The title of your node.'),
 ];

Learn the crucial rules when it comes to JavaScript programming standards in Drupal.

Drupal Behaviors

In most cases, the JS code should be included in Drupal Behaviors – this is a JavaScript object that Drupal initializes after the page loads and after each AJAX trigger in the DOM (Document-Object-Model). Thanks to them, JavaScript integration in Drupal websites and projects becomes more convenient.

Indentation

As with PHP, you should use 2-space indentation, no tabs. Lines should not contain trailing whitespaces.

Semicolons

JavaScript allows for an optional “semicolon insertion” but it does not comply with Drupal standards. All statements (except function, if, switch, try, and while) MUST be terminated by a semicolon (;), and return values must start on the same line as the return keyword.

Naming

Variables and multi-word functions that are not constants or constructors should be named using the lowerCamelCase convention.

When a variable contains a jQuery object, it must start with a dollar sign ($):

var $form = $('#search-block-form');
var $inputs = $form.find('input');

Variables

All variables must be declared using var only once at the beginning of a function.

Each one should be declared in a separate line – including variables that are declared but do not receive a value, e.g.

var anArray = [];
var eventCallback = function () {};
var curTableDragSetting;

Functions

The function name should start with a module or theme name declaring the function to avoid name clashes:

Drupal.behaviors.myModuleTableDrag = function (context) {
 Object.keys(Drupal.settings.tableDrag).forEach(function (base) {
   $('#' + base).once('tabledrag', addBehavior);
 });
};

Arrays

Arrays should be formatted with one space separating each element and operator:

var someArray = ['hello', 'world'];

Similarly to the PHP, if the array declaration exceeds 80 characters, you should divide into a few lines.

Drupal CSS coding standards include recommendations for organizing styles, using CSS classes, and naming methodologies such as BEM (Block Element Modifier).

BEM Structure

Block Element Modifier helps keep the CSS code readable, consistent, and scalable, especially in large projects. It is based on three basic concepts: Block, Element, and Modifier.

1. A block is an independent element that can be used separately or as a part of a bigger structure. It is a main container that contains many elements with a single function. Blocks have unique names and represent large parts of a website such as headers, navigation menus, footers, e.g.:

.navbar {
 /* Styles for navbar block */
}

2. An element is part of a block that depends on it. It should not be used on its own outside the context of that block. Elements are usually marked with classes within the block and used to define individual parts. e.g.:

.navbar__item { 
/* Styles for navbar block item */
}

3. A modifier is an additional class that changes the appearance and behavior of a block or element. This allows for flexibility in styling while maintaining consistency. Modifiers can change the size, color, hide, or add functions, such as:

.navbar--dark {
 /* Modifier changing the navbar style to dark */
}
.navbar__item--active {
 /* Modifier highlighting the active element in the navbar */
}

Defining Components in Their CSS Files

It is best to place the components in their own CSS files and load them only when necessary. Avoid mixing multiple components in one file. This will keep the code clear and manageable.

Formatting CSS in Drupal

Consider these essential guidelines for formatting CSS in Drupal:

• Use 2 spaces for every indentation level;
• Declarations must be indented one level from the selector;
• Do not leave trailing whitespaces at the end of the line;
• End all text files with a single blank line;
• Place a colon directly before the property name, followed by a single space and the property value;
• Terminate all declarations with a semicolon.

Twig is a template engine used in Drupal to generate dynamic HTML content. It is based on PHP syntax, but it is safer and easier. The most important aspects of twig programming standards are:

1. Adding only one space after the start of the delimiter (“{{“,” {%”,” {#”) and before the end of it (“}}”,” %}”,” #”}).
2. Adding one space before and after comparison, mathematical, logical, ~, is, in, and ternary operators.
3. Adding one space in arrays and hashes.
4. Not adding a space after an open bracket or before a closed bracket in expressions.
5. Not adding spaces before and after string delimiters.
6. Not adding spaces to operators like “|”,” .”,” ..”,” []”.
7. Avoiding spaces before and after brackets used for filter and function triggering.
8. Using lowercase variables and separating them with an underscore.
9. Using the same indentation as the target language of the template being rendered.