{"id":18711555,"url":"https://github.com/bitmap/less-styleguide","last_synced_at":"2026-01-26T00:07:27.975Z","repository":{"id":8942698,"uuid":"10676912","full_name":"bitmap/less-styleguide","owner":"bitmap","description":"CSS/LESS style guide","archived":false,"fork":false,"pushed_at":"2014-06-06T23:29:55.000Z","size":152,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-11T21:44:09.886Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/CaleyD/FrontEndGuidelines","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitmap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-13T22:03:12.000Z","updated_at":"2017-11-17T07:04:30.000Z","dependencies_parsed_at":"2022-09-01T06:42:18.758Z","dependency_job_id":null,"html_url":"https://github.com/bitmap/less-styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bitmap/less-styleguide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Fless-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Fless-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Fless-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Fless-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitmap","download_url":"https://codeload.github.com/bitmap/less-styleguide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Fless-styleguide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28761914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T23:06:19.311Z","status":"ssl_error","status_checked_at":"2026-01-25T23:03:50.555Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T12:39:27.150Z","updated_at":"2026-01-26T00:07:27.955Z","avatar_url":"https://github.com/bitmap.png","language":null,"readme":"This document outlines CSS/LESS best practices at WebMD Health Services. For thr entire front-end development guidelines, see [this document](https://github.com/CaleyD/FrontEndGuidelines).\n\n## LESS Style Guide\n\n* [Organization](#organization)\n* [Pattern Library](#pattern-library)\n* [Themes](#themes)\n* [Code Formatting](#css-code-formatting)\n* [Stay Rad](#stay-rad)\n\nThe second component of a web page is the presentation information contained in the Cascading Style Sheet (CSS). Web browsers successful implementation of CSS has given web authors site-wide control over the look and feel of their web sites.\n\nJust as the information on a web page is semantically described in the HTML Markup, CSS describes all presentation aspects of the page via a description of its visual properties. CSS is powerful in that these properties are mixed and matched via identifiers to control the page's layout and visual characteristics through the layering of style rules (the \"cascade\").\n\nWe use the [.LESS CSS preprocessor](http://www.dotlesscss.org) to aid our CSS generation. Care should be taken when writing css .LESS makes it easy to nest selectors that compile into long selectors. Long selectors chains can cause file bloat, selector precedence problems, adversely affect problems and make css harder to maintain and edit.\n\n__Rule of thumb__\n\n* Avoid creating selectors with more than 2 spaces in them\n* Avoid `!important`\n\n`!important` is a sign that we have a selector war and other selectors have too high of specificity, try to refactor the css instead of adding `!important`.\n\nGet to know [CSS Selectors](http://www.w3.org/TR/css3-selectors/#selectors).\n\nEmbrace CSS3 to progressively enhance styles for newer browsers.\n\nWe aren't all CSS experts, reach out to one of our many knowledgable CSS devs before hacking together a solution in JavaScript.\n\n### Organization\n\nYou should include exactly __one__ stylesheet on your page and no more. This base file should then import all dependancies and components. Components and styles for different sections should be contained in their own stylesheet and should not cross-pollinate. The home page styles directory, for example, contains the files \n\n```\nstyles\n|-- homepage.less\n|-- _layout.less\n|-- _featuredNews.less\n|-- _featuredVideo.less\n|-- _promoWeblets.less\n```\n\n`homepage.less` is included on the page and imports the different files for each section like this:\n\n```css\n@import '/themes/common/css/minimal';\n@import 'layout';\n@import 'featuredNews';\n@import 'featuredVideo';\n@import 'promoWeblets';\n```\n\nAnd that's it. `minimal.less` and the legacy-filled `theme_builder.less` import site chrome like the header, footer, nav, and other junk you don't have to worry about unless you're Obelisk. *One of these files must be included.* The master `themes_common.less` and a sponsor's `theme.less` are magically included in every stylesheet by default and import our [Pattern Library](#pattern-library) components, so you can utilize our global variables and mixins in any LESS file on the site.\n\n### Pattern Library\n\nOur [Pattern Library](http://localhost/wminternal/ui/patternlibrary) is broken up into three pieces, `core`, `components`, and `modules`.\n\n__*Core*__ contains base styles for our site's body, header, footer, and navigation. It also handles a lot of the global responsive bits. Anything between the nav and the footer should not use anything from core.\n\n__*Components*__ describe define things like forms, buttons, tables, sprites, grids, etc, that are used frequently across the site. All of these components are organized into mixins and included for you so you can call them at any time, but some have special instructions. Check the documentation.\n\n__*Modules*__ are more specialized components like modals, tab panels, and progress bars. Since these components are used infrequently and tend to be more customizable they live here.\n\nThere is one more piece of the Pattern Library that contains legacy/deprecated components, and you should stay away from it unless you're Obelisk.\n\n#### BEM, OOCSS\n[BEM](http://bem.info/method/definitions/) is an object-oriented methodology for organizing resuable blocks of mark-up and CSS. Many of our pattern library components are being ported to BEM. It allows us to rapidly prototype and redesign components because they are not coupled to each other.\n\n```css\n.block {}\n.block__element {}\n.block--modifier {}\n\n```\n\nBEM is very easy to wrap your head around, and has helped reduce CSS bloat casued by nesting, overrides, and repetitive mixins. We reccomend you adopt this convention when building applications. [Get to know BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).\n\n### Theme Variables\n\nUse common variables for things like colors and gutters. This way clients can override variables with their branding colors and fonts if need be. All global variables can all be located in `themes_common.less`, but the ones we recommend using are in the Pattern Library.\n\nHere's a good example of how to use theme variables wisely.\n\n```css\n.class {\n    color: @brand_Primary;\n    background: @gray_Lighter;\n    border: 1px solid @gray_Light;\n}\n```\n\n### CSS Code Formatting\n\nWe want to make sure our LESS looks familiar to everyone editing it. That's why these guidelines are not simply suggestions, but the *de facto* style you should be coding. The Front-End Community of Practice decides on the style based on our standards. Don't get busted by the COPs.\n\n#### Indentation\n\nIndent four spaces, no tabs\n\n#### Selectors\n\nClass and ID names should be `camelCase`\n\n```css\n.className {...}\n#theIdName {...}\n```\n\nHTML elements should be lowercase, of course. That said, avoid styling naked tags.\n\n```css\ndiv {...}\nspan {...}\n```\n\nPut a space between selector and opening bracket and put the closing bracket on a separate, non-indented line\n\n```css\n.class {\n    color: #000;\n}\n```\n\nReturn after each closing bracket\n\n```css\n.class1 {\n    color: #000;\n}\n\n.class1 {\n    color: #000;\n}\n```\n\nPut multiple selectors on separate lines, separated by commas\n\n```css\n.class1,\n.class2,\n.class3,\n.class4 {\n    color: #000;\n}\n```\n\n#### Properties\n\nMake sure there is a space between property and value, each property is indented one level, and end each line with a semi-colon `;`\n\n```css\ndiv {\n    color: #000;\n    padding: 16px;\n    height: 100px;\n}\n```\n\nSpecify units (`px, em, %`) unless it is `0` (then omit the units).\n\n```css\npadding: 10px 0 15px;\n```\n\nSpecify HEX values for colors\n\n```\n#000\n#FF0138\n```\n\nUse [LESS functions](http://lesscss.org/#reference) to adjust hue, saturation, lightness, or transparency\n\n```css\ncolor: fade(#000, 50%);\nbackground: mix(#FFF, #000, 50%);\n```\n\nStrings must use single-quotes\n\n```css\na:after {\n    content: 'pizza';\n}\n```\n\nCSS3 properties that support layering should be on separate lines, with the semi-colon on the last line\n\n```css\n.class {\n    box-shadow:\n        0 2px 4px #000,\n        0 4px 8px #333;\n    color: #000;\n}\n```\n\n#### Variables\n\nIn LESS, variables are declared with `@` preceding the name.\n\n```css\n@themeColor: #F00;\n```\n\nAny color or layout value used more than once should be a variable\n\n```css\n@alertColor: #0F0;\n@columnWidth: 80px;\n```\n\n__Any variable that is available for client customization *must be declared globally* in themes_common__\n\n#### Mixins\n\nAlways add parenthesis to declare mixins. Mixins should be styled like selectors. Do not put a space after the mixin name.\n\n```css\n.mixin() {\n    color: #F00;\n}\n```\n\nInclude mixins first when declaring mixins inside selectors\n\n```css\ndiv {\n    .mixin();\n    padding: 16px;\n}\n```\n\nDefine mixins at the bottom of the document or in their own separate file via `@import`\n\n```css\ndiv {\n    .mixin();\n}\n...\n.mixin() {\n    color: #F00;\n}\n```\n\nDo not put spaces around parameters\n\n```css\n.mixin(@color) {\n    background: @color;\n}\n```\n\nSpecify default parameters whenever possible.\n\n```css\n.mixin(@color: #F00) {\n    background: @color;\n}\n```\n\nWhen calling mixins, you do not need to specify the parameter name, just the value\n\n```css\n.class {\n    .mixin(#F00, 100px);\n}\n```\n\nMultiple parameters with values should be separated on their own lines.\n\n```css\n.mixin(\n    @color: #F00,\n    @width: 100px\n    ) {\n    background: @color;\n    width: @width;\n}\n```\n\nGuarded mixins with boolean values that are true do not need `= true`\n\n```css\n.mixin(@boolean) when (@boolean) {...}\n```\n\nUse the `when not` keyword when specifying falsey booleans\n\n```css\n.mixin(@boolean) when not (@boolean) {...}\n```\n\nUse bundles to contain similar mixins\n\n```css\n#gradient {\n    .linear() {...}\n    .radial() {...}\n}\n```\n\nCall the bundles with the greater than `\u003e` character\n\n```css\ndiv {\n    #gradient \u003e .linear(...);\n}\n```\n\n__Make sure you're not redefining mixins that exist globally! Check components \u003e common.less__\n\n\n### Stay Rad\n\n* Don't use inline styles\n* Use semantically descriptive class names (`.orangeButton` is terrible)\n* Never nest deeper than three levels (The Inception Rule)\n* Never nest an ID within and ID\n* Avoid name spacing with element + class names unless it's a state rule (i.e., `div.class`)\n* Don't repeat yourself (DRY), abstract patterns into reusable mixins and variables\n* Use shorthand whenever possible (`margin` instead of `margin-top` + `margin-right`, etc.)\n* group properties together (layout, fonts, background, prefixes, hacks)\n* Use the star-hack `*property: value;` to easily target IE7\n* When importing LESS files, do not put .less extension (`@import 'component'`)\n* If your LESS file is over 100 lines it's time to start breaking things apart\n* If you're doing something dumb, document why with a `//` comment\n","funding_links":[],"categories":["Style Guides"],"sub_categories":["Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitmap%2Fless-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitmap%2Fless-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitmap%2Fless-styleguide/lists"}