{"id":22093222,"url":"https://github.com/iadvize/css-convention","last_synced_at":"2026-03-19T21:43:06.596Z","repository":{"id":75918721,"uuid":"118779047","full_name":"iadvize/css-convention","owner":"iadvize","description":"Css conventions at iAdvize ","archived":false,"fork":false,"pushed_at":"2018-10-16T08:18:41.000Z","size":12,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-01-29T07:14:54.207Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/iadvize.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":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-24T14:51:11.000Z","updated_at":"2018-12-03T09:45:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"94afd29f-fdee-4dbc-ad8f-e681141f2327","html_url":"https://github.com/iadvize/css-convention","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fcss-convention","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fcss-convention/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fcss-convention/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fcss-convention/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iadvize","download_url":"https://codeload.github.com/iadvize/css-convention/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245188947,"owners_count":20574873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-12-01T03:13:20.881Z","updated_at":"2026-01-04T23:07:30.860Z","avatar_url":"https://github.com/iadvize.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# DEPRECATED This documentation has been migrated [here](https://docs.iadvize.io/RFCs/css/).\n\n# OOCSS code standards\n\nThe purpose of this document is to provide guidelines for writing CSS. Code conventions are important for the long-term maintainability of code. Most of the time, developers are maintaining code, either their own or someone else’s. The goal is to have everyone’s code look the same, which allows any developer to easily work on another developer’s code.\n\nWe've borrowed some ideas from [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and credited it throughout the document.\n\n### Class Names\n\nClass names should be camel case, with no dashes or underscores.\n\n```css\n/* Good - Use camel case */\n.thisIsGood {}\n\n/* Bad - don't use underscores */\n.this_is_bad {}\n\n/* Bad - don't use dashes */\n.this-is-bad {}\n```\n\n### Indentation\n\nEach indentation level is made up of four spaces. Do not use tabs. (Please set your editor to use four spaces)\n\n```css\n/* Good */\n.stubbornella {\n    color: #fff;\n    background-color: #000;\n}\n\n/* Bad - all on one line */\n.stubbornella {color: #fff; background-color: #000;}\n```\n\nRules inside of `@media` must be indented an additional level.\n\n```css\n/* Good */\n@media screen and (max-width:480px) {\n   .stubbornella {\n       color: green;\n   }\n}\n```\n\n### Brace Alignment\n\nThe opening brace should be on the same line as the last selector in the rule and should be preceded by a space. The closing brace should be on its own line after the last property and be indented to the same level as the line on which the opening brace is.\n\n```css\n/* Good */\n.stubbornella {\n    color: #fff;\n}\n\n/* Bad - closing brace is in the wrong place */\n.stubbornella {\n    color: #fff;\n    }\n\n/* Bad - opening brace missing space */\n.stubbornella{\n    color: #fff;\n}\n```\n\n### Property Format\n\nEach property must be on its own line and indented one level. There should be no space before the colon and one space after. All properties must end with a semicolon.\n\n```css\n/* Good */\n.stubbornella {\n    background-color: blue;\n    color: red;\n}\n\n/* Bad - missing spaces after colons */\n.stubbornella {\n    background-color:blue;\n    color:red;\n}\n\n/* Bad - missing last semicolon */\n.stubbornella {\n    background-color: blue;\n    color:red\n}\n```\n\n### Using CSS Preprocessors\n\nKeep nesting to 3 levels deep. \n\n```scss\n/* Good */\n.stubbornella {\n    .inner {\n      ...\n\n        .title {\n         ....\n\n            .subtxt {\n            ...\n\n            }\n        }\n    }\n}\n\n/* Bad - more than 3 levels of nesting */\n.stubbornella {\n    .inner {\n      ...\n\n        .title {\n         ....\n\n            .subtxt {\n                ...\n\n                .element {\n                    ...\n\n                }\n            }\n        }\n    }\n}\n```\n\nDeclare `@extend` followed by `@include` statements first in a declaration block. (Borrowed from [Idiomatic CSS] (https://github.com/necolas/idiomatic-css#4-format))\n\n```scss\n/* Good */\n.stubbornella {\n    @extend .company;\n    @include font-size(14);\n    color: #555;\n    font-size: 11px;\n}\n\n/* Bad */\n.stubbornella {\n    color: #555;\n    @extend .company;\n    font-size: 11px;\n    @include font-size(14);\n}\n```\n\n### Vendor-Prefixed Properties\n\nWhen using vendor-prefixed properties, always use the standard property as well. The standard property must always come after all of the vendor-prefixed versions of the same property.\n\n```css\n.stubbornella {\n    -moz-border-radius: 4px;\n    -webkit-border-radius: 4px;\n    border-radius: 4px;\n}\n```\n\nIf a vendor prefixed property is used, -moz, -webkit, -o, -ms vendor prefixes should also be used. Vendor-prefixed classes should align to the left with all other properties.\n\n```css\n/* Good */\n-webkit-border-radius: 4px;\n-moz-border-radius: 4px;\nborder-radius: 4px;\n\n/* Bad - colons aligned */\n-webkit-border-radius:4px;\n   -moz-border-radius:4px;\n        border-radius:4px;\n```\n\nSuffix property value pairs that apply only to a particular browser or class of browsers with a comment listing browsers affected.\n\n```css\nbackground: #fcfcfc; /* Old browsers */\nbackground: -moz-linear-gradient(...); /* FF3.6+ */\nbackground: -webkit-gradient(...); /* Chrome,Safari4+ */\nbackground: -webkit-linear-gradient(...); /* Chrome10+,Safari5.1+ */\nbackground: -o-linear-gradient(...); /* Opera 11.10+ */\nbackground: -ms-linear-gradient(...); /* IE10+ */\nbackground: linear-gradient(...); /* W3C */\n```\n\nSuffix fallback with “Old browsers” and standard property with “W3C”. Add a plus or minus to indicate that a property applies to all previous browsers by the same vendor or all future browsers by the same vendor.\nUsing !important\n\nDo not use !important on CSS properties. The only time this is allowed is in a global style (provided by Core team).\n\n```css\n/* Good */\n.stubbornella {\n   color: red;\n}\n\n/* Bad - don't use !important */\n.stubbornella {\n   color: red !important;\n}\n```\n\n### Font Sizing\n\nAll font sizes must be specified using rem only with a pixel fall back. Do not use percentages, ems or pixels alone.\n\n```css\n/* Good */\n.stubbornella {\n   font-size: 14px; /* pixel fall back rule should come first */\n   font-size: 1.4rem;\n}\n\n/* Bad - uses ems */\n.stubbornella {\n   font-size: 1.2em;\n}\n\n/* Bad - uses percentage */\n.stubbornella {\n   font-size: 86%;\n}\n\n/* Bad - uses pixel only */\n.stubbornella {\n   font-size: 14px;\n}\n```\n\n### HEX value\n\nWhen declaring HEX values, use lowercase and shorthand (where possible) (Borrowed from [Idiomatic CSS] (https://github.com/necolas/idiomatic-css#4-format))\n\n```css\n/* Good */\n.stubbornella {\n    color: #ccc;\n}\n\n/* Bad */\n.stubbornella {\n    color: #CCCCCC;\n}\n```\n\n### String Literals\n\nStrings should always use double quotes (never single quotes).\n\n```css\n/* Good */\n.stubbornella:after {\n    content: \"Stubbornella\";\n}\n\n/* Bad - single quotes */\n.stubbornella:after {\n    content: 'Stubbornella';\n}\n```\n\n### Background Images and Other URLs\n\nWhen using a url() value, always use quotes around the actual URL. \n\n```css\n/* Good */\n.stubbornella {\n    background: url(\"img/logo.png\");\n}\n\n/* Bad - missing quotes */\n.stubbornella {\n    background: url(img/logo.png);\n}\n```\n\n### Attribute values in selectors\n\nUse double quotes around attribute selectors.\n\n```css\n/* Good */\ninput[type=\"submit\"] {\n    ...\n}\n\n/* Bad - missing quotes */\ninput[type=submit] {\n    ...\n}\n\n/* Bad - using single quote */\ninput[type='submit'] {\n    ...\n}\n```\n\n\n### Do not use units with zero values\n\nZero values do not require named units, omit the “px” or other unit.\n\n```css\n/* Good */\n.stubbornella {\n   margin: 0;\n}\n\n/* Bad - uses units */\n.stubbornella {\n   margin: 0px;\n}\n```\n\n### Internet Explorer Hacks\n\nOnly property hacks are allowed. To target Internet Explorer, use Internet Explorer-specific hacks like * and _ in the normal CSS files. Browser specific styles should not be in separate per-browser stylesheets. We prefer to keep all the CSS for a particular object in one place as it is more maintainable. In addition selector hacks should not be used. Classes like .ie6 increase specificity. Hacks should be kept within the CSS rule they affect and only property hacks should be used.\n\n```css\n/* Good */\n.stubbornella {\n   margin: 0;\n   _margin: -1px;\n}\n\n/* Bad - uses selector hacks */\n.stubbornella {\n   margin: 0px;\n}\n.ie6 .stubbornella {\n   margin: -1px;\n}\n```\n\n### Selectors\n\nEach selector should appear on its own line. The line should break immediately after the comma. Each selector should be aligned to the same left column.\n\n```css \n/* Good */\nbutton,\ninput.button {\n   color: red;\n}\n\n/* Bad - selectors one on line */\nbutton, input.button {\n   color: red;\n}\n```\n\n### Class Qualification\n\nDo not over-qualify class name selectors with an element type unless you are specifying exceptions to the default styling of a particular class.\n\n``` css\n/* Good */\n.buttonAsLink {}\n\n/* Bad - element name should be omitted */\nspan.buttonAsLink {}\n\n/* Good - element is providing exceptions */\n.buttonAsLink {}\nspan.buttonAsLink {}\n```\n\n### Scoped styles\n\nAll selectors for a particular component start with the wrapper class name.\n\n```css\n/* Good */\n.calloutButton {\n   color: blue;\n}\n.calloutButton span {\n   color: green;\n}\n\n/* Bad - second rule missing scope */\n.calloutButton {\n   color: blue;\n}\nspan {\n   color: green;\n}\n```\n\n### JavaScript Dependence\n\nAll rules should be coded to expect JavaScript to be enabled. Rules that apply when JavaScript is disabled should be preceded by the noJS class.\n\n```css\n/* Good */\n.noJS .calloutContent {\n   display:block;\n}\n\n/* Bad - don't use .js */\n.js .calloutContent{\n   display: none;\n}\n```\n\n### :hover and :focus\n\nIf :hover pseudo class is styled, :focus should also be styled for accessibility. Focus styles should never be removed.\n\n```css\n/* Good */\na:hover,\na:focus {\n   color: green;\n}\n\n/* Bad - missing :focus */\na:hover {\n   color: green;\n}\n```\n\n### Avoid using IDs\n\nSelectors should never use HTML element IDs. Always use classes for applying styles to specific areas of a page.\n\n```css\n/* Good */\n.header {\n   height: 100px;\n}\n\n/* Bad - using an ID */\n#header {\n   height: 100px;\n}\n```\n\nThe author field should contain the username of the person who first created the file. Subsequent authors or primary maintainers may also choose to add their name. The browsers in which this file was tested should be listed next to @tested.\n\n### Width and height on components\n\nNo heights on anything that contains text. Components should be flexible and their widths should be controlled by grids.\n\n```css\n/* Good - no width specified */\n.calloutContent {\n    border: 1px solid #ccc;\n    background: #fff;\n}\n\n/* Bad - dimension specified */\n.calloutContent {\n    width: 200px;\n    height: 150px;\n    border: 1px solid #ccc;\n    background: #fff;\n}\n```\n\n### Naming classes\n\nWhen labelling elements within a component with a class, try to avoid generic classes like ``.inner``, ``.hd``, ``.bd``. Instead, prefix the class name with the name of the component. This is to avoid CSS getting overwritten when classes are too generic.\n\n```css\n/* Good */\n.boxHd {\n    background: #ccc;\n}\n.boxBd {\n    background: #ccc;\n}\n\n/* Bad */\n.box .hd {\n    background: #ccc;\n}\n.box .bd  {\n    background: #ccc;\n}\n```\n\nHowever when extending a component and styling the inner elements, try to use the base component's inner elements' class name for styling, instead of extending the class names of the inner elements as well.\n\n```css\n/* Good */\n.boxSimple .boxHd {\n    background: #ccc;\n}\n.boxSimple .boxBd {\n    background: #ccc;\n}\n\n/* Avoid this if possible */\n.boxSimple .boxSimpleHd {\n    background: #ccc;\n}\n```\n\n\n### Comments\n\nWe follow the commenting guideline from [Idiomatic CSS] (https://github.com/necolas/idiomatic-css#comments) with the following exception:\n* Place comment on the same line as the CSS declaration it's related to.\n\nAlso, add file-level comments at the top of every CSS file, describing the file in the following format:\n\n```css\n/**\n* @desc         Description of the file.\n* @name         Simple name for the file (i.e., Search_Widget)\n* @author       username\n* @tested       browsers\n* @requires     helpers.css (tied to the @name of another file)\n*/\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiadvize%2Fcss-convention","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiadvize%2Fcss-convention","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiadvize%2Fcss-convention/lists"}