CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Manual:Coding conventions/CSS - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"599ccc5f-5159-41de-a777-89c8aee883c6","wgCanonicalNamespace":"Manual","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":100,"wgPageName":"Manual:Coding_conventions/CSS","wgTitle":"Coding conventions/CSS","wgCurRevisionId":6784023,"wgRevisionId":6784023,"wgArticleId":75213,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Development guidelines"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Manual:Coding_conventions/CSS","wgRelevantArticleId":75213,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault": true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","mediawiki.codex.messagebox.styles":"ready","mediawiki.action.styles":"ready","mediawiki.interface.helpers.styles":"ready","ext.translate.tag.languages":"ready","ext.pygments":"ready", "ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.pygments.view","ext.cite.ux-enhancements","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.action.styles%7Cmediawiki.codex.messagebox.styles%7Cmediawiki.interface.helpers.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="noindex,nofollow,max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Manual:Coding conventions/CSS - MediaWiki"> <meta property="og:type" content="website"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Manual:Coding_conventions/CSS"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-100 ns-subject mw-editable page-Manual_Coding_conventions_CSS rootpage-Manual_Coding_conventions skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=Manual%3ACoding+conventions%2FCSS" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACoding+conventions%2FCSS&returntoquery=oldid%3D6784023" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACoding+conventions%2FCSS&returntoquery=oldid%3D6784023" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACoding+conventions%2FCSS&returntoquery=oldid%3D6784023" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACoding+conventions%2FCSS&returntoquery=oldid%3D6784023" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Naming" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Naming"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Naming</span> </div> </a> <ul id="toc-Naming-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Whitespace" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Whitespace"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Whitespace</span> </div> </a> <ul id="toc-Whitespace-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Quotes" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Quotes"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Quotes</span> </div> </a> <ul id="toc-Quotes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Colour_property_values" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Colour_property_values"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Colour property values</span> </div> </a> <ul id="toc-Colour_property_values-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Vendor_prefixes" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Vendor_prefixes"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Vendor prefixes</span> </div> </a> <ul id="toc-Vendor_prefixes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-.client-js_and_.client-nojs" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#.client-js_and_.client-nojs"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>.client-js and .client-nojs</span> </div> </a> <ul id="toc-.client-js_and_.client-nojs-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Anti-patterns" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Anti-patterns"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Anti-patterns</span> </div> </a> <button aria-controls="toc-Anti-patterns-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Anti-patterns subsection</span> </button> <ul id="toc-Anti-patterns-sublist" class="vector-toc-list"> <li id="toc-z-index" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#z-index"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span> <span>z-index</span> </div> </a> <ul id="toc-z-index-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-!important" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#!important"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.2</span> <span>!important</span> </div> </a> <ul id="toc-!important-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-LESS" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#LESS"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>LESS</span> </div> </a> <button aria-controls="toc-LESS-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle LESS subsection</span> </button> <ul id="toc-LESS-sublist" class="vector-toc-list"> <li id="toc-Structure" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Structure"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.1</span> <span>Structure</span> </div> </a> <ul id="toc-Structure-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Import" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Import"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.2</span> <span>Import</span> </div> </a> <ul id="toc-Import-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Troubleshooting" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Troubleshooting"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.3</span> <span>Troubleshooting</span> </div> </a> <ul id="toc-Troubleshooting-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-MediaWiki_LESS_library" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#MediaWiki_LESS_library"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.4</span> <span>MediaWiki LESS library</span> </div> </a> <ul id="toc-MediaWiki_LESS_library-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Mixins" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Mixins"> <div class="vector-toc-text"> <span class="vector-toc-numb">8.5</span> <span>Mixins</span> </div> </a> <ul id="toc-Mixins-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Manual</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Coding conventions/CSS</span></h1> <div class="mw-indicators"> <div id="mw-indicator-tpl-shortcut" class="mw-indicator"><div class="mw-parser-output"><div class="mw-parser-output"><style data-mw-deduplicate="TemplateStyles:r6605561">.mw-parser-output .tpl-badge{background-color:var(--background-color-progressive-subtle,#eaf3ff);color:var(--color-base,#202122);border-radius:10px;display:inline-block;font-size:90%;padding:5px 8px}</style><div class="tpl-badge">shortcut: <a href="/wiki/CC/LESS" class="mw-redirect" title="CC/LESS"><b>CC/LESS</b></a></div></div></div></div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-manual" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Coding_conventions/CSS" title="View the subject page [c]" accesskey="c"><span>Manual</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Manual_talk:Coding_conventions/CSS" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Coding_conventions/CSS"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Manual:Coding_conventions/CSS"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Manual:Coding_conventions/CSS" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Manual:Coding_conventions/CSS" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&oldid=6784023" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Manual%3ACoding_conventions%2FCSS&id=6784023&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fw%2Findex.php%3Ftitle%3DManual%3ACoding_conventions%2FCSS%26oldid%3D6784023"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fw%2Findex.php%3Ftitle%3DManual%3ACoding_conventions%2FCSS%26oldid%3D6784023"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Manual%3ACoding+conventions%2FCSS"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Manual%3ACoding_conventions%2FCSS&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Manual:Coding_conventions/CSS&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions" title="Special:MyLanguage/Manual:Coding conventions">Manual:Coding conventions</a></bdi></div><div class="cdx-message cdx-message--block cdx-message--warning mw-revision"><span class="cdx-message__icon"></span><div class="cdx-message__content"><div id="mw-revision-info">Revision as of 10:05, 4 October 2024 by <a href="/wiki/User:BlankEclair" class="mw-userlink" title="User:BlankEclair" data-mw-revid="6784023"><bdi>BlankEclair</bdi></a> <span class="mw-usertoollinks">(<a href="/w/index.php?title=User_talk:BlankEclair&action=edit&redlink=1" class="new mw-usertoollinks-talk" title="User talk:BlankEclair (page does not exist)">talk</a> | <a href="/wiki/Special:Contributions/BlankEclair" class="mw-usertoollinks-contribs" title="Special:Contributions/BlankEclair">contribs</a>)</span> <span class="comment">(<span class="autocomment"><a href="#z-index">→<bdi dir="ltr">z-index</bdi></a>: </span> Remove a)</span></div><div id="mw-revision-nav">(<a href="/w/index.php?title=Manual:Coding_conventions/CSS&diff=prev&oldid=6784023" title="Manual:Coding conventions/CSS">diff</a>) <a href="/w/index.php?title=Manual:Coding_conventions/CSS&direction=prev&oldid=6784023" title="Manual:Coding conventions/CSS">← Older revision</a> | Latest revision (diff) | Newer revision → (diff)</div></div></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Manual:Coding_conventions/CSS/de" class="mw-pt-progress mw-pt-progress--low" title="Handbuch:Kodierungskonventionen/CSS (5% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/dtp" class="mw-pt-progress mw-pt-progress--low" title="Manual:Coding conventions/CSS/dtp (2% translated)" lang="dtp" dir="ltr">Kadazandusun</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/fr" class="mw-pt-progress mw-pt-progress--complete" title="Manuel:Règles de codage/CSS (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/pl" class="mw-pt-progress mw-pt-progress--low" title="Manual:Coding conventions/CSS/pl (3% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/cs" class="mw-pt-progress mw-pt-progress--complete" title="Příručka:Konvence pro psaní kódu/CSS (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/bn" class="mw-pt-progress mw-pt-progress--low" title="Manual:Coding conventions/CSS/bn (0% translated)" lang="bn" dir="ltr">বাংলা</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/zh" class="mw-pt-progress mw-pt-progress--med" title="手册:代码编写约定/CSS (36% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Manual:Coding_conventions/CSS/ja" class="mw-pt-progress mw-pt-progress--low" title="Manual:コーディング規約/CSS (14% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6353907">.mw-parser-output .hatnote{font-style:italic;padding-bottom:0.4em;margin-bottom:0.4em;border-bottom:1px solid #ccc}.mw-parser-output .hatnote.no-border{border-bottom:none}</style><div role="note" class="hatnote">See <a href="/wiki/Special:MyLanguage/Manual:CSS" title="Special:MyLanguage/Manual:CSS">Manual:CSS</a><span style="display:none"><a href="/wiki/Manual:CSS" title="Manual:CSS"> </a></span> for additional caveats and tips that aren't mentioned here.</div> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Naming">Naming</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=1" title="Edit section: Naming"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r6353907"><div role="note" class="hatnote">See <a href="/wiki/Special:MyLanguage/Manual:Interface/IDs_and_classes" title="Special:MyLanguage/Manual:Interface/IDs and classes">Manual:Interface/IDs and classes</a><span style="display:none"><a href="/wiki/Manual:Interface/IDs_and_classes" title="Manual:Interface/IDs and classes"> </a></span> for the documentation of of common IDs and classes.</div> <p>Name classes and IDs the same way: all lowercase and broken up by dashes. Use the <code>mw-</code> prefix to avoid conflicts with IDs generated by the wikitext parser to mark section headings. </p><p>Some examples: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Site-wide elements */</span> <span class="p">.</span><span class="nc">mw-body</span><span class="o">,</span> <span class="p">.</span><span class="nc">mw-headline</span><span class="o">,</span> <span class="p">.</span><span class="nc">mw-label</span><span class="o">,</span> <span class="p">.</span><span class="nc">mw-input</span><span class="w"> </span><span class="p">{</span> <span class="p">}</span> <span class="c">/* Special pages */</span> <span class="p">.</span><span class="nc">mw-body-content</span><span class="o">,</span> <span class="c">/* - Special:AllPages */</span> <span class="p">.</span><span class="nc">mw-allpages-table-form</span><span class="o">,</span> <span class="p">.</span><span class="nc">mw-allpages-nav</span><span class="w"> </span><span class="p">{</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="Whitespace">Whitespace</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=2" title="Edit section: Whitespace"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>One selector/one property per line</li> <li>Opening braces for the CSS declaration block on the same line as the (last) selector.</li> <li>Indent each property declaration with a tab.</li> <li>No space before the colon (<code>:</code>).</li> <li>One space between the colon and before the value.</li> <li>One space after commas (<code>, </code>) in multi-value properties.</li> <li>A semi-colon (<code>;</code>) after each declaration (including the last one).</li> <li>Closing braces unindented back to the left.</li> <li>Annotation comments for <a rel="nofollow" class="external text" href="https://github.com/cssjanus/cssjanus">CSSJanus</a> and <a rel="nofollow" class="external text" href="https://github.com/gruntjs/grunt-contrib-cssmin">CSSMin</a> should be on their own line, above the CSS declaration they're for.</li> <li>An empty line between one CSS rule set and the next.</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">mw-selector</span><span class="o">,</span> <span class="p">#</span><span class="nn">mw-some-element</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span> <span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#252525</span><span class="p">;</span> <span class="w"> </span><span class="k">float</span><span class="p">:</span><span class="w"> </span><span class="kc">right</span><span class="p">;</span> <span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">Arial</span><span class="p">,</span><span class="w"> </span><span class="n">Helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span> <span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* CSSMin/CSSJanus example annotations */</span> <span class="p">.</span><span class="nc">mw-look-at-the-left</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c">/* @embed */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="nb">url</span><span class="p">(</span><span class="sx"> images/foobar.png </span><span class="p">);</span> <span class="w"> </span><span class="c">/* @noflip */</span> <span class="w"> </span><span class="k">float</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span> <span class="p">}</span> </pre></div> <p><br /> </p> <div class="mw-heading mw-heading2"><h2 id="Quotes">Quotes</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=3" title="Edit section: Quotes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In the <code>background-image</code> declaration, the <code>url()</code> syntax is preferred to be used without <a href="https://en.wikipedia.org/wiki/Quotation_mark_glyphs" class="extiw" title="w:Quotation mark glyphs">quotes</a>. They are not needed. The only case where it could cause problems is when an unescaped closing parenthesis occurs in the given path, but those should be URL-escaped. </p> <div class="mw-heading mw-heading2"><h2 id="Colour_property_values">Colour property values</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=4" title="Edit section: Colour property values"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>With CSS3 developers have a plethora of accepted colour values for CSS properties like <code>background-color</code>, <code>color</code>, <code>border-color</code> and all others. For maintainability and file size<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> use in lowercase: </p> <ul><li>Hex colour values like <code>#fff</code> (shorthand notation if possible) or <code>#fefefe</code></li> <li><code>rgba()</code> values if an alpha transparency > 0 is necessary</li> <li><code>transparent</code> colour keyword (Attention at some <= IE9 caveats)</li></ul> <p>Avoid other colour keyword values, <code>rgb()</code>, <code>hsl()</code> and <code>hsla()</code> notations. Also make sure, that your colour contrast ratio of foreground and background (same for background gradients) should reach at least Level AA, but better AAA of WCAG 2.0.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p><p><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">Read further at MDN.</a> </p> <div class="mw-heading mw-heading2"><h2 id="Vendor_prefixes">Vendor prefixes</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=5" title="Edit section: Vendor prefixes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Always put newer versions after older versions in case of CSS vendor prefixes, putting the standardized declaration at the end. See also <a rel="nofollow" class="external free" href="https://css-tricks.com/ordering-css3-properties/">https://css-tricks.com/ordering-css3-properties/</a>. </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Wrong */</span> <span class="p">.</span><span class="nc">bar</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="kp">-webkit-</span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Right */</span> <span class="p">.</span><span class="nc">bar</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kp">-webkit-</span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="c">/* It is important that the -webkit version is before the standardized version.</span> <span class="c"> * Otherwise it will override it (as expected in CSS), including triggering the</span> <span class="c"> * bugs the old -webkit- version has that WebKit has since fixed (in CSS3), but keeps</span> <span class="c"> * in the old implementation (for backwards compatibility).</span> <span class="c"> */</span> <span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Wrong */</span> <span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-o-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-moz-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nf">gradient</span><span class="p">(</span><span class="kc">linear</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">bottom</span><span class="p">,</span><span class="w"> </span><span class="nf">from</span><span class="p">(</span><span class="mh">#444444</span><span class="p">),</span><span class="w"> </span><span class="kc">to</span><span class="err">(</span><span class="mh">#999999</span><span class="p">));</span> <span class="p">}</span> <span class="c">/* Right */</span> <span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#444</span><span class="p">;</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nf">gradient</span><span class="p">(</span><span class="kc">linear</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">bottom</span><span class="p">,</span><span class="w"> </span><span class="nf">from</span><span class="p">(</span><span class="mh">#444</span><span class="p">),</span><span class="w"> </span><span class="kc">to</span><span class="err">(</span><span class="mh">#999</span><span class="p">));</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-moz-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-o-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">to</span><span class="w"> </span><span class="kc">bottom</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="p">}</span> <span class="c">/* Right (commented) */</span> <span class="p">.</span><span class="nc">foo</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c">/* Fallback colour in case background-image is broken or not supported */</span> <span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#444</span><span class="p">;</span> <span class="w"> </span><span class="c">/* Safari 4+, Chrome 2, iOS 2 */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nf">gradient</span><span class="p">(</span><span class="kc">linear</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="kc">bottom</span><span class="p">,</span><span class="w"> </span><span class="nf">from</span><span class="p">(</span><span class="mh">#444</span><span class="p">),</span><span class="w"> </span><span class="kc">to</span><span class="err">(</span><span class="mh">#999</span><span class="p">));</span> <span class="w"> </span><span class="c">/* Safari 5.1+, Chrome 10+, iOS 5 */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-webkit-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="c">/* Firefox 3.6 - 15 */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-moz-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="c">/* Opera 11.10 - 12.5 */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="bp">-o-</span><span class="nb">linear-gradient</span><span class="p">(</span><span class="w"> </span><span class="kc">top</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="w"> </span><span class="c">/* Standard (Firefox 16+, Opera 12.5+, IE10) */</span> <span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="nb">linear-gradient</span><span class="p">(</span><span class="kc">to</span><span class="w"> </span><span class="kc">bottom</span><span class="p">,</span><span class="w"> </span><span class="mh">#444</span><span class="p">,</span><span class="w"> </span><span class="mh">#999</span><span class="p">);</span> <span class="p">}</span> </pre></div> <p><br /> </p> <div class="mw-heading mw-heading2"><h2 id=".client-js_and_.client-nojs">.client-js and .client-nojs</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=6" title="Edit section: .client-js and .client-nojs"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>MediaWiki outputs class <code>client-nojs</code> on the <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">html</span><span class="p">></span></code> element on every page. At runtime, JavaScript code replaces this with class <code>client-js</code>. Hence you can use this class in your selector to conditionally show, hide, or customise certain elements depending on whether the browser has JavaScript enabled and is supported by <a href="/wiki/Special:MyLanguage/ResourceLoader" title="Special:MyLanguage/ResourceLoader">ResourceLoader</a><span style="display:none"><a href="/wiki/ResourceLoader" title="ResourceLoader"> </a></span>. Note that for this to be useful, the stylesheet in question must not be loaded with <code>mw.loader</code> (see <a href="/wiki/Special:MyLanguage/ResourceLoader/Developing_with_ResourceLoader#Server-side" title="Special:MyLanguage/ResourceLoader/Developing with ResourceLoader">Developing with ResourceLoader</a><span style="display:none"><a href="/wiki/ResourceLoader/Developing_with_ResourceLoader#Server-side" title="ResourceLoader/Developing with ResourceLoader"> </a></span>) </p> <div class="mw-heading mw-heading2"><h2 id="Anti-patterns">Anti-patterns</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=7" title="Edit section: Anti-patterns"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="z-index">z-index</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=8" title="Edit section: z-index"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Avoid using <code>z-index</code> when possible. Instead, try to use the natural stacking order in the DOM. Known exceptions include: </p> <ul><li><a href="/wiki/Special:MyLanguage/Compact_Personal_Bar" title="Special:MyLanguage/Compact Personal Bar">Compact Personal Bar</a><span style="display:none"><a href="/wiki/Compact_Personal_Bar" title="Compact Personal Bar"> </a></span> at <code>100</code></li> <li><a href="/wiki/Special:MyLanguage/Page_Previews" title="Special:MyLanguage/Page Previews">Page Previews</a><span style="display:none"><a href="/wiki/Page_Previews" title="Page Previews"> </a></span> starting at <code>110</code></li> <li><a href="https://en.wikipedia.org/wiki/Wikipedia:Tools/Navigation_popups" class="extiw" title="w:Wikipedia:Tools/Navigation popups">Navigation Popups</a> starting at <code>1000</code>.</li></ul> <div class="mw-heading mw-heading3"><h3 id="!important"><span id=".21important"></span>!important</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=9" title="Edit section: !important"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Avoid using <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="o">!</span><span class="nt">important</span></code> (with the exception of working around upstream code running on the same page that also uses <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="o">!</span><span class="nt">important</span></code>, because only <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="o">!</span><span class="nt">important</span></code> can override <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="o">!</span><span class="nt">important</span></code>). </p><p>In most cases you don't need it at all (e.g. paranoia). 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).<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> </p><p>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: </p> <ul><li>Repeat the same selector to increase weight, like <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="p">.</span><span class="nc">foo</span><span class="p">.</span><span class="nc">foo</span><span class="p">.</span><span class="nc">foo</span><span class="p">.</span><span class="nc">foo</span></code>.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup></li> <li>Add or repeat attribute selectors, like <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="o">[</span><span class="nt">class</span><span class="o">]</span></code>.</li> <li>Use default elements as ancestor selector (e.g. <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="nt">body</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span></code>, <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><span class="nt">html</span><span class="w"> </span><span class="nt">body</span><span class="w"> </span><span class="p">.</span><span class="nc">foo</span></code>).</li></ul> <p>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.) </p><p><span class="anchor" id="Less"></span> </p> <div class="mw-heading mw-heading2"><h2 id="LESS">LESS</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=10" title="Edit section: LESS"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Starting with <a href="/wiki/Special:MyLanguage/MediaWiki_1.22" title="Special:MyLanguage/MediaWiki 1.22">MediaWiki 1.22</a><span style="display:none"><a href="/wiki/MediaWiki_1.22" title="MediaWiki 1.22"> </a></span>, there is native support in <a href="/wiki/Special:MyLanguage/ResourceLoader" title="Special:MyLanguage/ResourceLoader">ResourceLoader</a><span style="display:none"><a href="/wiki/ResourceLoader" title="ResourceLoader"> </a></span> for transparently using LESS (with file extension <code>.less</code>) in place of CSS. Most of the LESS syntax can be formatted using the CSS conventions: </p> <ul><li>Indent nested blocks with 1 <kbd>tab</kbd> (same as for indenting declarations inside CSS rules).</li> <li>Don't space-align declarations values inside mixins (same as for CSS rules).</li> <li>No spaces on the outside of the parameter lists in function invocations, mixin uses and mixin definitions (same as for <code>url( image.png )</code> in CSS).</li> <li>No quotes around parameter values (same as for <code>url( image.png )</code> in CSS).</li></ul> <p>Example: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/*</span> <span class="c"> You do not need to copy '.background-image' into your code.</span> <span class="c"> It is provided by MediaWiki core (in mediawiki.less).</span> <span class="c"> It is here as an example of guard syntax.</span> <span class="c">*/</span> <span class="p">.</span><span class="nc">background-image</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">)</span><span class="w"> </span><span class="nt">when</span><span class="w"> </span><span class="o">(</span><span class="nt">embeddable</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">))</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">background-image</span><span class="o">:</span><span class="w"> </span><span class="nt">embed</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">)</span><span class="p">;</span> <span class="w"> </span><span class="nt">background-image</span><span class="o">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">)!</span><span class="nt">ie</span><span class="p">;</span> <span class="p">}</span> <span class="p">.</span><span class="nc">background-image</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">)</span><span class="w"> </span><span class="nt">when</span><span class="w"> </span><span class="nt">not</span><span class="w"> </span><span class="o">(</span><span class="nt">embeddable</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">))</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">background-image</span><span class="o">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="p">@</span><span class="k">url</span><span class="o">)</span><span class="p">;</span> <span class="p">}</span> <span class="p">.</span><span class="nc">mw-example</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">padding</span><span class="o">:</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2em</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">5em</span><span class="o">;</span> <span class="w"> </span><span class="nt">border</span><span class="o">:</span><span class="w"> </span><span class="nt">1px</span><span class="w"> </span><span class="nt">solid</span><span class="w"> </span><span class="p">#</span><span class="nn">aaa</span><span class="o">;</span> <span class="w"> </span><span class="p">.</span><span class="nc">background-image</span><span class="o">(</span><span class="nt">images</span><span class="o">/</span><span class="nt">example</span><span class="p">.</span><span class="nc">png</span><span class="o">);</span> <span class="w"> </span><span class="nt">font-size</span><span class="o">:</span><span class="w"> </span><span class="nt">1em</span><span class="o">;</span> <span class="w"> </span><span class="p">.</span><span class="nc">mw-example-thing</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span> <span class="w"> </span><span class="c">/* @noflip */</span> <span class="w"> </span><span class="k">float</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span> <span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#ddd</span><span class="p">;</span> <span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="mi">4</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <p>There's a few new concepts that don't map to CSS conventions, outlined below. </p> <div class="mw-heading mw-heading3"><h3 id="Structure">Structure</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=11" title="Edit section: Structure"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Separate nested CSS rules from the parent declarations by 1 empty line.</li> <li><code>@noflip</code> tags must be on the immediate line above the declaration, as shown in the example above.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Import">Import</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=12" title="Edit section: Import"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>The filename of an import statement should omit the <code>.less</code> file extension.</li> <li>Use <code>@import</code> to load mixins and variables so that they may be used by the current LESS stylesheet; these are processed synchronously by <code>phpless</code> and are not present in the generated CSS output.</li> <li>Don't use <code>@import</code> to bundle stylesheets that are related to one another only conceptually; instead, reference the set of files in the <code>styles</code> array of a ResourceLoader module.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Troubleshooting">Troubleshooting</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=13" title="Edit section: Troubleshooting"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>If your LESS import doesn't work, here some things to check: </p> <ul><li>Does your code contain <code>@font-face</code>? See <a rel="nofollow" class="external text" href="https://stackoverflow.com/questions/8338241/how-we-can-use-font-face-in-less-type-of-css">this question on StackOverflow about how to use @font-face with LESS</a>.</li></ul> <div class="mw-heading mw-heading3"><h3 id="MediaWiki_LESS_library">MediaWiki LESS library</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=14" title="Edit section: MediaWiki LESS library"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a href="https://gerrit.wikimedia.org/g/mediawiki/core/%2B/HEAD/resources/src/mediawiki.less/mediawiki.mixins.less" class="extiw" title="git:mediawiki/core/+/HEAD/resources/src/mediawiki.less/mediawiki.mixins.less">resources/src/mediawiki.less/mediawiki.mixins.less</a> is a common LESS library for MediaWiki. The directory is in <code>$wgResourceLoaderLESSImportPaths</code>, so you don't need to provide the full path to it. For example: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="s2">"mediawiki.mixins"</span><span class="p">;</span> <span class="p">.</span><span class="nc">my-create-link</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="err">.background-image-svg('images/create_normal.svg',</span><span class="w"> </span><span class="err">'images/create_normal.png')</span><span class="p">;</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Mixins">Mixins</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=15" title="Edit section: Mixins"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Mixin names should use hyphen-case, just like CSS properties. </p><p>They should be prefixed with <code>mixin-</code> to avoid confusing developers who are familiar with CSS, but not LESS and distinguish them from classes, the syntax for which is similar. </p><p>As mentioned above, no spaces on the outside of the parameter list and avoid quoting values. </p><p>If you need to call a mixin with one or more arguments that contain a comma use the semi colon <code>;</code> in LESS to separate the arguments instead. This will free up the comma to be used in the literal value. </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">mixin-example</span><span class="o">(</span><span class="p">@</span><span class="k">function</span><span class="o">,</span><span class="w"> </span><span class="p">@</span><span class="k">properties</span><span class="o">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">transition-timing-function</span><span class="o">:</span><span class="w"> </span><span class="p">@</span><span class="k">function</span><span class="p">;</span> <span class="w"> </span><span class="nt">transition-property</span><span class="o">:</span><span class="w"> </span><span class="p">@</span><span class="k">property</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Good */</span> <span class="p">.</span><span class="nc">mw-example</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="p">.</span><span class="nc">mixin-example</span><span class="o">(</span><span class="nt">easy-in-out</span><span class="o">;</span><span class="w"> </span><span class="nt">opacity</span><span class="o">,</span><span class="w"> </span><span class="nt">color</span><span class="o">);</span> <span class="w"> </span><span class="c">/* Expands to: */</span> <span class="w"> </span><span class="nt">transition-timing-function</span><span class="o">:</span><span class="w"> </span><span class="nt">easy-in-out</span><span class="o">;</span> <span class="w"> </span><span class="nt">transition-property</span><span class="o">:</span><span class="w"> </span><span class="nt">opacity</span><span class="o">,</span><span class="w"> </span><span class="nt">color</span><span class="o">;</span> <span class="p">}</span> <span class="c">/* Bad */</span> <span class="p">.</span><span class="nc">mw-example</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="err">.mixin-example('easy-in-out',</span><span class="w"> </span><span class="err">'opacity,</span><span class="w"> </span><span class="err">color')</span><span class="p">;</span> <span class="w"> </span><span class="c">/* Expands to: */</span> <span class="w"> </span><span class="k">transition-timing-function</span><span class="p">:</span><span class="w"> </span><span class="s1">'easy-in-out'</span><span class="p">;</span> <span class="w"> </span><span class="k">transition-property</span><span class="p">:</span><span class="w"> </span><span class="s1">'opacity, color'</span><span class="p">;</span> <span class="w"> </span><span class="c">/* Values include the quotes, this is invalid CSS</span> <span class="c"> * and results in the browser ignoring these properties</span> <span class="c"> */</span> <span class="p">}</span> <span class="c">/* Bad */</span> <span class="p">.</span><span class="nc">mw-example</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="err">.mixin-example(~'easy-in-out',</span><span class="w"> </span><span class="err">~'opacity,</span><span class="w"> </span><span class="err">color')</span><span class="p">;</span> <span class="w"> </span><span class="c">/* Expands to: */</span> <span class="w"> </span><span class="k">transition-timing-function</span><span class="p">:</span><span class="w"> </span><span class="n">easy-in-out</span><span class="p">;</span> <span class="w"> </span><span class="k">transition-property</span><span class="p">:</span><span class="w"> </span><span class="k">opacity</span><span class="p">,</span><span class="w"> </span><span class="kc">color</span><span class="p">;</span> <span class="w"> </span><span class="c">/* The ~ operator instructs LESS to unquote the values.</span> <span class="c"> * This produces good CSS but we avoid this pattern</span> <span class="c"> * in favour of using ';' consistently.</span> <span class="c"> */</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Coding_conventions/CSS&action=edit&section=16" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://github.com/h5bp/html5-boilerplate/issues/1656">Lowercase markup has smaller gzip output</a>, HTML5 Boilerplate 2015</span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG 2.0 Understanding Contrast</a></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"> <a rel="nofollow" class="external text" href="https://css-tricks.com/specifics-on-css-specificity/">Specifics on CSS Specificity</a></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://vimeo.com/100264064">3.14 things I didn’t know about CSS</a>, CSS Day Conference 2014</span> </li> </ol></div> <p><br /> </p> <div class="navbox-styles nomobile"><style data-mw-deduplicate="TemplateStyles:r6230902">.mw-parser-output .navbox{border:1px solid #aaa;box-sizing:border-box;width:100%;margin:auto;clear:both;font-size:88%;text-align:center;padding:1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox th,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{text-align:center;padding-left:1em;padding-right:1em}.mw-parser-output th.navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background:#fdfdfd}.mw-parser-output .navbox-list{border-color:#fdfdfd}.mw-parser-output .navbox th,.mw-parser-output .navbox-title{background:#eaeeff}.mw-parser-output .navbox-abovebelow,.mw-parser-output th.navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background:#ddddff}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background:#e6e6ff}.mw-parser-output .navbox-even{background:#f7f7f7}.mw-parser-output .navbox-odd{background:transparent}.mw-parser-output th.navbox-title1{border-left:2px solid #fdfdfd;width:100%}.mw-parser-output td.navbox-list1{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .hlist dd,.mw-parser-output .navbox .hlist dt,.mw-parser-output .navbox .hlist li{white-space:nowrap}.mw-parser-output .navbox .hlist dd dl,.mw-parser-output .navbox .hlist dt dl,.mw-parser-output .navbox .hlist li ol,.mw-parser-output .navbox .hlist li ul{white-space:normal}.mw-parser-output ol+.navbox-styles+.navbox,.mw-parser-output ul+.navbox-styles+.navbox{margin-top:0.5em}</style></div><div role="navigation" class="navbox" aria-labelledby="Development_guidelines" style="border: 1px solid #aaa; padding: 3px;;padding:3px"><table class="nowraplinks hlist navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r6387430">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li,.mw-parser-output .hlist .mw-empty-elt{display:none}.mw-parser-output .hlist dt:after{content:": "}.mw-parser-output .hlist dd:after,.mw-parser-output .hlist li:after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child:after,.mw-parser-output .hlist dt:last-child:after,.mw-parser-output .hlist li:last-child:after{content:none}.mw-parser-output .hlist dd dd:first-child:before,.mw-parser-output .hlist dd dt:first-child:before,.mw-parser-output .hlist dd li:first-child:before,.mw-parser-output .hlist dt dd:first-child:before,.mw-parser-output .hlist dt dt:first-child:before,.mw-parser-output .hlist dt li:first-child:before,.mw-parser-output .hlist li dd:first-child:before,.mw-parser-output .hlist li dt:first-child:before,.mw-parser-output .hlist li li:first-child:before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child:after,.mw-parser-output .hlist dd dt:last-child:after,.mw-parser-output .hlist dd li:last-child:after,.mw-parser-output .hlist dt dd:last-child:after,.mw-parser-output .hlist dt dt:last-child:after,.mw-parser-output .hlist dt li:last-child:after,.mw-parser-output .hlist li dd:last-child:after,.mw-parser-output .hlist li dt:last-child:after,.mw-parser-output .hlist li li:last-child:after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li:before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child:before,.mw-parser-output .hlist dt ol>li:first-child:before,.mw-parser-output .hlist li ol>li:first-child:before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r4692751">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar ul{display:inline;white-space:nowrap}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em;width:6em}</style><div class="plainlinks hlist navbar mini"><ul><li class="nv-view"><a href="/wiki/Template:Development_guidelines_navigation" title="Template:Development guidelines navigation"><abbr title="View this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Development_guidelines_navigation" title="Template talk:Development guidelines navigation"><abbr title="Discuss this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">t</abbr></a></li><li class="nv-edit"><a class="external text" href="https://www.mediawiki.org/w/index.php?title=Template:Development_guidelines_navigation&action=edit"><abbr title="Edit this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">e</abbr></a></li></ul></div><div id="Development_guidelines" style="font-size:114%;margin:0 4em"><a href="/wiki/Special:MyLanguage/Development_guidelines" title="Special:MyLanguage/Development guidelines"><span style="font-weight: bold;">Development guidelines</span></a><span style="display:none"><a href="/wiki/Development_guidelines" title="Development guidelines"> </a></span></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Policies</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Development_policy" title="Special:MyLanguage/Development policy">Development policy</a><span style="display:none"><a href="/wiki/Development_policy" title="Development policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Wikimedia_Engineering_Architecture_Principles" title="Special:MyLanguage/Wikimedia Engineering Architecture Principles">Architecture principles</a><span style="display:none"><a href="/wiki/Wikimedia_Engineering_Architecture_Principles" title="Wikimedia Engineering Architecture Principles"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Wikimedia_services_policy" title="Special:MyLanguage/Wikimedia services policy">Services policy</a><span style="display:none"><a href="/wiki/Wikimedia_services_policy" title="Wikimedia services policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Support_policy_for_PHP" title="Special:MyLanguage/Support policy for PHP">Support policy for PHP</a><span style="display:none"><a href="/wiki/Support_policy_for_PHP" title="Support policy for PHP"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Gerrit/Privilege_policy" title="Special:MyLanguage/Gerrit/Privilege policy">Gerrit/Privilege policy</a><span style="display:none"><a href="/wiki/Gerrit/Privilege_policy" title="Gerrit/Privilege policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Stable_interface_policy" title="Special:MyLanguage/Stable interface policy">Stable interface policy</a><span style="display:none"><a href="/wiki/Stable_interface_policy" title="Stable interface policy"> </a></span> <ul><li><a href="/wiki/Special:MyLanguage/Stable_interface_policy/Frontend" title="Special:MyLanguage/Stable interface policy/Frontend">Frontend</a><span style="display:none"><a href="/wiki/Stable_interface_policy/Frontend" title="Stable interface policy/Frontend"> </a></span></li></ul></li> <li><a href="/wiki/Special:MyLanguage/MediaWiki_database_policy" title="Special:MyLanguage/MediaWiki database policy">MediaWiki database policy</a><span style="display:none"><a href="/wiki/MediaWiki_database_policy" title="MediaWiki database policy"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">General guidelines</th><td class="navbox-list1 navbox-list navbox-even" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Security_for_developers" title="Special:MyLanguage/Security for developers">Security for developers</a><span style="display:none"><a href="/wiki/Security_for_developers" title="Security for developers"> </a></span></li> <li><a href="https://wikitech.wikimedia.org/wiki/Performance/Guides/Backend_performance_practices" class="extiw" title="wikitech:Performance/Guides/Backend performance practices">Performance guidelines</a></li> <li><a href="/wiki/Special:MyLanguage/Gerrit/Commit_message_guidelines" title="Special:MyLanguage/Gerrit/Commit message guidelines">Commit message guidelines</a><span style="display:none"><a href="/wiki/Gerrit/Commit_message_guidelines" title="Gerrit/Commit message guidelines"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Security_checklist_for_developers" title="Special:MyLanguage/Security checklist for developers">Security checklist for developers</a><span style="display:none"><a href="/wiki/Security_checklist_for_developers" title="Security checklist for developers"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Localisation" title="Special:MyLanguage/Localisation">Localisation</a><span style="display:none"><a href="/wiki/Localisation" title="Localisation"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Design/Living_style_guide" title="Special:MyLanguage/Design/Living style guide">Design style guide</a><span style="display:none"><a href="/wiki/Design/Living_style_guide" title="Design/Living style guide"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Documentation/Style_guide" title="Special:MyLanguage/Documentation/Style guide">Documentation/Style guide</a><span style="display:none"><a href="/wiki/Documentation/Style_guide" title="Documentation/Style guide"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Accessibility_guide_for_developers" title="Special:MyLanguage/Accessibility guide for developers">Accessibility guide for developers</a><span style="display:none"><a href="/wiki/Accessibility_guide_for_developers" title="Accessibility guide for developers"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Inclusive_language" title="Special:MyLanguage/Inclusive language">Inclusive language</a><span style="display:none"><a href="/wiki/Inclusive_language" title="Inclusive language"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Guidelines_for_a_healthy_code_review_culture" title="Special:MyLanguage/Guidelines for a healthy code review culture">Guidelines for a healthy code review culture</a><span style="display:none"><a href="/wiki/Guidelines_for_a_healthy_code_review_culture" title="Guidelines for a healthy code review culture"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Collaborative_programming" title="Special:MyLanguage/Collaborative programming">Collaborative programming</a><span style="display:none"><a href="/wiki/Collaborative_programming" title="Collaborative programming"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Best_practices_for_extensions" title="Special:MyLanguage/Best practices for extensions">Best practices for extensions</a><span style="display:none"><a href="/wiki/Best_practices_for_extensions" title="Best practices for extensions"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Pre-commit_checklist" title="Special:MyLanguage/Manual:Pre-commit checklist">Pre-commit checklist</a><span style="display:none"><a href="/wiki/Manual:Pre-commit_checklist" title="Manual:Pre-commit checklist"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Code conventions</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions#Code_structure" title="Special:MyLanguage/Manual:Coding conventions">All languages</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions#Code_structure" title="Manual:Coding conventions"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/PHP" title="Special:MyLanguage/Manual:Coding conventions/PHP">PHP</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/PHP" title="Manual:Coding conventions/PHP"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:PHP_unit_testing/Writing_unit_tests#Test_conventions" title="Special:MyLanguage/Manual:PHP unit testing/Writing unit tests">PHPUnit</a><span style="display:none"><a href="/wiki/Manual:PHP_unit_testing/Writing_unit_tests#Test_conventions" title="Manual:PHP unit testing/Writing unit tests"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/JavaScript" title="Special:MyLanguage/Manual:Coding conventions/JavaScript">JavaScript</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/JavaScript" title="Manual:Coding conventions/JavaScript"> </a></span></li> <li><b><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/CSS" title="Special:MyLanguage/Manual:Coding conventions/CSS">CSS</a></b><span style="display:none"><a class="mw-selflink selflink"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Selenium" title="Special:MyLanguage/Manual:Coding conventions/Selenium">Selenium</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Selenium" title="Manual:Coding conventions/Selenium"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Lua" title="Special:MyLanguage/Manual:Coding conventions/Lua">Lua</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Lua" title="Manual:Coding conventions/Lua"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Python" title="Special:MyLanguage/Manual:Coding conventions/Python">Python</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Python" title="Manual:Coding conventions/Python"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Java" title="Special:MyLanguage/Manual:Coding conventions/Java">Java</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Java" title="Manual:Coding conventions/Java"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/SVG" title="Special:MyLanguage/Manual:Coding conventions/SVG">SVG</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/SVG" title="Manual:Coding conventions/SVG"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Vue" title="Special:MyLanguage/Manual:Coding conventions/Vue">Vue</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Vue" title="Manual:Coding conventions/Vue"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Database" title="Special:MyLanguage/Manual:Coding conventions/Database">Database schemas</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Database" title="Manual:Coding conventions/Database"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Product_Analytics/Style_guide" title="Special:MyLanguage/Product Analytics/Style guide">Analytics (Python, R, SQL)</a><span style="display:none"><a href="/wiki/Product_Analytics/Style_guide" title="Product Analytics/Style guide"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">API client code</th><td class="navbox-list1 navbox-list navbox-even" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/API:Client_code/Gold_standard" title="Special:MyLanguage/API:Client code/Gold standard">Standards for API client libraries</a><span style="display:none"><a href="/wiki/API:Client_code/Gold_standard" title="API:Client code/Gold standard"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Drafts</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><i><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Documentation" title="Special:MyLanguage/Manual:Coding conventions/Documentation">Code documentation</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Documentation" title="Manual:Coding conventions/Documentation"> </a></span></i></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Manual:Coding_conventions/CSS&oldid=6784023">https://www.mediawiki.org/w/index.php?title=Manual:Coding_conventions/CSS&oldid=6784023</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:Development_guidelines" title="Category:Development guidelines">Development guidelines</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 4 October 2024, at 10:05.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Manual:Coding_conventions/CSS&oldid=6784023&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.canary-84779d6bf6-psplp","wgBackendResponseTime":135,"wgPageParseReport":{"limitreport":{"cputime":"0.407","walltime":"1.393","ppvisitednodes":{"value":3457,"limit":1000000},"postexpandincludesize":{"value":48684,"limit":2097152},"templateargumentsize":{"value":12192,"limit":2097152},"expansiondepth":{"value":16,"limit":100},"expensivefunctioncount":{"value":69,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":34346,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 1197.308 1 -total"," 19.37% 231.888 44 Template:Ll"," 17.50% 209.581 1 Template:Conventions_navigation"," 16.94% 202.883 1 Template:Navbox"," 7.42% 88.784 88 Template:Translatable"," 5.87% 70.286 44 Template:Pagelang"," 5.57% 66.710 2 Template:Rellink"," 3.44% 41.176 19 Template:TNTN"," 1.85% 22.159 2 Template:Shortcut"," 0.69% 8.235 2 Template:Badge"]},"scribunto":{"limitreport-timeusage":{"value":"0.116","limit":"10.000"},"limitreport-memusage":{"value":1602594,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.canary-7b66477f75-bjxd5","timestamp":"20241105052036","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>