Manual:Coding conventions/CSS

This page describes coding conventions for CSS and LESS stylesheets in the MediaWiki codebase.

Linting
We use stylelint as our code quality tool, with a custom config for Wikimedia (stylelint-config-wikimedia). You can use the node module  to lint your CSS or LESS; MediaWiki and most extensions run it as part of continuous integration. The settings for MediaWiki core can be found in.

Naming
Name classes the same way: all lowercase and broken up by dashes. In MediaWiki core, use the  prefix. In extensions, use a  prefix. Avoid introducing new IDs and use classes instead.

Some examples:

Constructed class names
When constructing class names dynamically in the code, ensure a comment is placed above that lists all the possible class names:

PHP

JavaScript

Specificity
Provide selectors with as low specificity as possible, preferably a single module class selector. This simplifies overriding them in specific contexts, like certain extensions or in users scripts.

Whitespace
We love whitespace:


 * One selector per line.
 * One property declaration per line.
 * Opening braces for the CSS declaration block on the same line as the (last) selector.
 * Indent each property declaration with a tab.
 * No space before the colon.
 * One space after the colon and before the value.
 * One space after commas in multi-value properties.
 * One space after a starting and before an ending parentheses ( and  ) in selectors (ex.  ) and properties (ex.  ).
 * A semi-colon after each declaration (including the last one).
 * Closing braces unindented back to the left.
 * Annotation for CSSJanus and CSSMin should be on their own line, above the CSS declaration they're for.
 * An empty line between one CSS rule set and the next.

Quotes
Wikimedia uses single quotes for values that require quotation. Such as the values of the  CSS property, and in attribute selectors.

Quotes are unnecessary in the  parameter of a   declaration. The only case where this could cause problems is when an unescaped closing parenthesis occurs in the path; instead you should URL-escape such characters.

Color property values
CSS3 supports many different kinds of color values for CSS properties like,  ,  , et al. For consistency and compatibility, only use these three:


 * Hex color values like  and  . (Use lowercase for better gzip compression ! Use shorthand notation when possible.)
 * values if an alpha transparency is required like . (Attention: IE8 doesn't support   notation, so always provide a matching declaration before this one with a hex color value as fallback.)
 * color keyword. (Attention: IE8 supports it only for  and  . It draws   as black. )

Prefer all values in lowercase for consistency and optimized file compression. . See also Talk page section.

Avoid other color values (including color names/keywords – think i18n while picturing,  ,  , and   notations). Also make sure that your color contrast ratio of foreground and background (incl. background gradients, and fallback colors) complies to WCAG 2.0 Level AA, ideally Level AAA.

Read further at MDN Web Docs.

Sizing units
Wikimedia Foundation aims to support a diverse audience and a wide range of technologies and use cases. A very popular accessibility user setting is increasing browser default font size while providing the best design for average users. It also reduces burden of  calculation and predictability on developers to the absolute minimum. Use  for all elements, that are not directly affecting reading or understanding user-interface. Mostly,  , icon sizing by   or.

Variable naming
CSS and LESS variables are set to follow a naming logic, going from repeating property to application usage to possible modifier or in short. Variables are generally used for one property, like, there are very few variables that are able to be used in different contexts. For example size variables.

It's simpler, specifically in big projects with many CSS/LESS files to have single usage variables, even though that might result in a larger variables definition file. See archived discussion for problem description. It's also more fail-safe when the variable contents get changed (think of  versus   applications).

CSS variables example:

LESS variables example:

Vendor prefixes
Always put the standardized versions of CSS properties after vendor-prefixed versions. It is important for avoiding bugs in old implementation, like in the following example of. See also https://css-tricks.com/ordering-css3-properties/.

 Right, and including annotation: 

.client-js and .client-nojs
MediaWiki outputs class  on the  element on every page. At runtime, JavaScript code replaces this with class. Hence you can use this class in your selector to conditionally show, hide, or customize certain elements depending on whether the browser has JavaScript enabled and is supported by ResourceLoader. Note that for this to be useful, the stylesheet in question must be loaded with, not   (see Developing with ResourceLoader)

Anti-patterns
Anti-patterns are mostly covered by use of central 'stylelint-config-wikimedia' already. Please also see the inline comments on master. Beyond there are some special properties/functionalities that deserve further explanation.

Don't rely on px unit based values
This is not a general rule, but it is general for a few properties. When a user increases their default font size preferences in a browser due to addressing visual impairments, a widely used accessibility feature, all sizes defined in  are not scaled. In order to let users scale text with this setting, rely on relative sizes like  or , specifically on properties that would result in non-scalable text like font-size or line-height or would overflow and be hidden, often with certain width or height limitations.

z-index
Avoid using  when possible. Instead, try to use the natural stacking order in the DOM. Known exceptions include:


 * Personal portlet (part of Skin) at.
 * Hovercards starting at.
 * Navigation Popups starting at a.

!important
Avoid using  (except for working around upstream code running on the same page that also uses , because only   can override  ).

In most cases you don't need it at all. In other cases it may be the result of a bug elsewhere in the program. In general, to override a rule you use the same selector as the original style rule. Since CSS cascades, this works naturally (styles applied later override styles applied earlier, selectors don't need to be of higher specificity ).

If the overriding styles apply before the original styles, the styles got loaded in the wrong order. That should be addressed, but you may resort to workarounds to artificially increase the specificity:


 * Repeat the same selector to increase weight, like.
 * Add or repeat attribute selectors, like.
 * Use default elements as ancestor selector (e.g.,  ).

Add however many points you need. It will still allow multiple stylesheets to use the same technique and each express their specificity. Better than adding in ancestors classes not related to your code. (And more maintainable as they won't change.)

LESS
Starting with MediaWiki 1.22, there is native support in ResourceLoader for using LESS (with file extension ) in place of CSS. Most of the LESS syntax can be formatted using the CSS conventions:


 * Indent nested blocks with 1 tab (same as for indenting declarations inside CSS rules).
 * Don't space-align declarations values inside mixins (same as for CSS rules).
 * No spaces on the outside of the parameter lists in function invocations, mixin uses and mixin definitions (same as for  in CSS).
 * No quotes around parameter values (same as for  in CSS).

Example:

There's a few new concepts that don't map to CSS conventions, outlined below.

Structure

 * Separate nested CSS rules from the parent declarations by 1 empty line.
 * tags must be on the line immediately above the declaration, as shown in the example above.

Import of LESS/CSS files

 * The filename of an import statement has to include the  file extension.
 * If the extension was omitted, in a folder with 'foo.css' and 'foo.less' LESS would import the latter.
 * If the code is ever used outside MediaWiki context, for example in Webpack as part of storybook, it will throw an error as it will assume it is a package with an index.css or index.js file meaning the code cannot be used.
 * Use  to load mixins and variables so that they may be used by the current LESS stylesheet; these are processed synchronously by LESS and will not be present in the generated CSS output. Load mixins first, variables second. Mixins should be free of variable values and parameters in mixin calls provide values with variables.
 * Don't use  to bundle stylesheets that are related to one another only conceptually; instead, reference the set of files in the   array of a ResourceLoader module.
 * Don't use  to import CSS files in LESS files, as the LESS parser will create an invalid import statement based on the physical location of the CSS file. Use   instead.

Troubleshooting import
If your LESS  doesn't work please check:


 * Does your code contain ? See this question on Stack Overflow about how to use @font-face with LESS.

Mixins
Mixin names should use hyphen-case, just like CSS class names, property keys and variable names.

They should be prefixed with  to avoid confusing developers who are familiar with CSS, but not LESS and distinguish them from classes, the syntax for which is similar.

As mentioned above, no spaces on the outside of the parameter list and avoid quoting values.

If you need to call a mixin with one or more arguments that contain a comma use a semicolon  in LESS to separate the arguments. This allows you to use commas in the literal value.

Built-in mixins
is a LESS library maintained as part of MediaWiki that is automatically available to any LESS stylesheet in MediaWiki. It can be imported from any LESS stylesheet in core, skins, and extensions.

Since MediaWiki 1.27, the built-in mixins contain utilities for using CSS Flexbox. Support is present all browsers that implemented at least one of the specs, including Internet Explorer 10. You need to specify your own fallback for older browsers, e.g. you can use floats for a more basic experience. Mixins available:

Example usage: