Code Style Naming Guidelines

---

---

⚠⚠ ⚠⚠ ⚠⚠

This wiki served in the early days of CKEditor 5 development and can be severely outdated.

Refer to the official CKEditor 5 documentation for up-to-date information.

---

---

Other than the standard naming convention syntax, there are guidelines that should be followed when choosing names.

Private Properties and Methods

Private properties and methods are prefixed with an underscore:

  CKEDITOR._counter;
  something._doInternalTask();

Methods and Functions

Methods and functions are almost always verbs/actions:

// Good
execute();
this.getNextNumber()

// Bad
this.editable();
this.status();

The exception for the above are get/set methods that are used very often, where the first parameter is the thing to get/set and the second is the optional value (set with it and get without):

this.data( 'name' );  // get
this.data( 'name', 'John' );  // set

this.attr( 'title' );  // get
this.attr( 'title', 'Flying plane' );  // set

Properties and Variables

Properties and variables are almost always nouns:

var editor;
this.name;
this.editable;

Boolean properties and variables are always prefixed by an auxiliary verb:

this.isDirty;
this.hasChildren;
this.canObserve;
this.mustRefresh;

Properties that require computation can use getters/setters and are named as nouns instead of having them as getXXX() and setXXX() methods when they are programmatically and conceptually simple:

// Good
this.status;
editor.setEditable();
editor.editable;  // readonly

// Bad
this.getStatus();
this.setStatus( 1 );
editor.editable = x; // setter

Shortcuts

For variables and parameters, commonly accepted short versions for long names are fine:

var attr, doc, el, fn, deps, err, id, args, uid, evt, env;

The following are the only short versions accepted for property names:

this.lang;
this.config;
this.id;
this.env;

Acronyms and proper names

Acronyms and, partially, proper names are naturally written in uppercase. This may stand against code style rules described above – especially when there is a need to include acronym or proper name in variable or class name. In such case, one should follow these rules:

• acronyms:
• all lowercase if at the beginning of the variable name: let domError
• default camel case at the beginning of the class name: class DomError
• default camel case inside variable / class name: function getDomError()
• proper names:
• all lowercase if at the beginning of the variable: let ckeditorError
• original case if at the beginning of the class name: class CKEditorError
• original case inside variable / class name: function getCKEditorError()

However, two letter acronyms and proper names (if originally written uppercase) should be uppercase. So e.g. getUI (not getUi).

CSS Classes

CSS class naming pattern is based on BEM methodology and code-style. All names are in lowercase with optional dash (-) between the words.

Top–level building blocks begin with mandatory ck- prefix:

.ck-dialog
.ck-toolbar
.ck-dropdown-menu

Elements belonging to the block namespace are delimited by double underscore (__):

.ck-dialog__header
.ck-toolbar__group
.ck-dropdown-menu__button-collapser

Modifiers are delimited by a single underscore (_). Key-value modifiers follow block-or-element_key_value naming pattern:

/* Block modifier */
.ck-dialog_hidden
/* Element modifier */
.ck-toolbar__group_collapsed
/* Block modifier as key_value  */
.ck-dropdown-menu_theme_some-theme

In HTML:

<div class="ck-reset_all ck-dialog ck-dialog_theme_lark ck-dialog_visible">
    <div class="ck-dialog__top ck-dialog__top_small">
        <h1 class="ck-dialog__top-title">Title of the dialog</h1>
        ...
    </div>
    ...
</div>

ID attributes

HTML ID attribute naming pattern follows CSS Classes naming guidelines. Each ID must begin with ck- prefix and consist of dash–separated (-) words in lowercase:

<div id="ck">...</div>
<div id="ck-unique-div">...</div>
<div id="ck-a-very-long-unique-identifier">...</div>