Andrea Fercia 11:49 am on January 18, 2019
Tags: ,   

Proposed Revision to CSS Coding Standards

During the Core Dev Chat on January 16th, 2019, a proposal for a minor change to the lengthier multi-part values section was briefly discussed.

The following is what the current CSSCSS Cascading Style Sheets. Coding Standards recommend in the property values section:

Multiple comma-separated values for one property should be separated by either a space or a newline, including within rgba(). Newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow. Each subsequent value after the first should then be on a new line, indented to the same level as the selector and then spaced over to left-align with the previous value.

Code examples:

	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;

	transition: 0.15s color ease-in-out,
                0.15s background-color ease-in-out,
                0.15s border-color ease-in-out;

However, the current recommendation leads to indentation made with spaces or mixed tabs and spaces.

Ideally, indentation made with spaces or mixed tabs and spaces should always be avoided and, to preserve the indentation alignment, all lengthier multi-part values should be in a new line.

Worth noting that, in many cases, new lines and tabs are already used across the WordPress adminadmin (and super admin) stylesheets, for example:

	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, .8);

Proposed change

During dev chat, general consensus was expressed in favor of changing the CSS Coding Standards values section as follows:

Multiple comma-separated values for one property should be separated by either a space or a newline, including within rgba(). Newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow, including before the first value. Values should be indented one level in from the property.

Code example:

	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, .8);

The proposed change aims to improve consistency across the admin stylesheets, code readability, and style linting.

Any feedback is welcome! Please share your thoughts in the comments below.

#css, #standards