{"id":18318422,"url":"https://github.com/tether/css-html-style-guide","last_synced_at":"2025-08-03T19:08:00.033Z","repository":{"id":10902260,"uuid":"13197506","full_name":"tether/css-html-style-guide","owner":"tether","description":"PetroFeed CSS \u0026 Markup Style Guide","archived":false,"fork":false,"pushed_at":"2013-10-01T15:00:54.000Z","size":196,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T14:08:52.850Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/tether.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-09-29T18:32:14.000Z","updated_at":"2013-10-01T15:00:57.000Z","dependencies_parsed_at":"2022-08-29T19:31:25.489Z","dependency_job_id":null,"html_url":"https://github.com/tether/css-html-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tether/css-html-style-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fcss-html-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fcss-html-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fcss-html-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fcss-html-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tether","download_url":"https://codeload.github.com/tether/css-html-style-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fcss-html-style-guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268596791,"owners_count":24275949,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-05T18:09:32.290Z","updated_at":"2025-08-03T19:07:59.984Z","avatar_url":"https://github.com/tether.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [PetroFeed](http://petrofeed.com) CSS + HTML Style Guide\n\n\u003e A minimal HTML and CSS style guide to produce decoupled markup and styles.\n\n## \u003ca name='TOC'\u003eTable of Contents\u003c/a\u003e\n\n  1. [Selectors](#selectors)\n  1. [Variables](#variables)\n  1. [Mixins](#mixins)\n  1. [Blocks](#blocks)\n  1. [Comments](#comments)\n  1. [Whitespace](#whitespace)\n  1. [Naming Conventions](#naming)\n  1. [Data Attributes](#data)\n  1. [Modularity](#modularity)\n  1. [Browser Compatibility](#compatibility)\n  1. [Testing](#testing)\n  1. [Performance](#performance)\n  1. [Resources](#resources)\n\n## \u003ca name='selectors'\u003eSelectors\u003c/a\u003e\n\n  - Selectors are evaluated **right to left** and should be as broad as possible. Really specific selectors are unnecessary and hinder performance. See [Selector Performance](http://smacss.com/book/selectors).\n\n    ```less\n    // bad\n    ul \u003e li \u003e a {\n      color: blue;\n    }\n\n    // good\n    a.nav {\n      color: blue;\n    }\n    ```\n\n    **[[⬆]](#TOC)**\n\n## \u003ca name='variables'\u003eVariables\u003c/a\u003e\n\n  - Use variables to declare constants like\n      - colours\n      - font-sizing\n      - column widths\n      - other fixed sizes (ie. footer height)\n\n    ```less\n    @small = 12px;\n    @medium = 16px;\n    @large = 24px;\n    @red = #CE6060;\n    ```\n\n  - Wrap your variables in classes so that they can easily be managed\n\n    ```less\n    .small {\n      font-size: @small;\n    }\n\n    .medium {\n      font-size: @medium;\n    }\n\n    .large {\n      font-size: @large;\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='mixins'\u003eMixins\u003c/a\u003e\n\n  - Use mixins where applicable to keep things consistent and prevent forgotten vendor specific style declarations.\n  \n    ```less\n    // bad\n    a.nav {\n      -webkit-border-radius: 2px;\n      -moz-border-radius: 2px;\n      border-radius: 2px;\n    }\n\n    // good\n    li.nav {\n      .rounded(2px);\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='blocks'\u003eBlocks\u003c/a\u003e\n\n  - Use multi-line blocks to make CSS cleaner and easier to read\n  \n    ```less\n    // bad\n    ul \u003e li \u003e a { color: red; }\n\n    // good\n    a.nav {\n      color: red;\n    }\n    ```\n\n  - Group similar style declarations together (ie. positioning, sizing, coloring, etc.)\n\n    ```less\n    // bad\n    a.nav {\n      margin: 5px;\n      font-size: 20px;\n      postion: absolute;\n      color: @red;\n      padding: 3px;\n      top: 0;\n      left: 10px;\n    }\n\n    // good\n    a.nav {\n      postion: absolute;\n      top: 0;\n      left: 10px;\n      margin: 5px;\n      padding: 3px;\n      font-size: 20px;\n      color: @red;\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='comments'\u003eComments\u003c/a\u003e\n\n  - Use comments to denote groups.\n\n    ```less\n    /* @group Layouts */\n    ```\n  - Should we also have HTML comments to denote HTML blocks???\n    \n    ```html\n\n      \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"span6\"\u003e\n          \u003ch2\u003eHi\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"span6\"\u003e\n          \u003ch2\u003eAwesome Person\u003c/h2\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\u003c!-- end container --\u003e\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='whitespace'\u003eWhitespace\u003c/a\u003e\n\n  - Put  before and after each style block.\n  \n    ```less\n    // bad\n    ul \u003e li \u003e a{\n      color: @red;\n    }\n    .some-class{\n      background: @purple;\n    }\n\n    // good\n    a.nav {\n      color: @red;\n    }\n\n    .some-class {\n      background: @purple;\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='naming'\u003eNaming Conventions\u003c/a\u003e\n\n  - Use meaningful class and id names\n\n    ```less\n    // bad\n    .l1 {\n      color: @red;\n    }\n\n    // good\n    .link.first {\n      color: @red;\n    }\n    ```\n\n  - Use multiple classes instead of single monster sized ones. You can get the same effect out of more selectors but you also get additional flexibility.\n\n    ```less\n    // bad\n    .btn-large-success {\n      width: @btn-large-width;\n      height: @btn-large-height;\n      background: @blue;\n    }\n\n    // good\n    .btn.large.success {\n      width: @btn-large-width;\n      height: @btn-large-height;\n      background: @blue;\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='data'\u003eData Attributes\u003c/a\u003e\n\n  - Use data attributes for data not for selectors. That's what classes and id's are for and they are faster. ([Perf Test](http://jsperf.com/class-vs-data-attribute-selector-performance))\n  \n    ```less\n    // bad\n    [data-role=\"page\"] {\n      height: 100%;\n    }\n\n    // good\n    .page {\n      height: 100%;\n    }\n    ```\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='modularity'\u003eModularity\u003c/a\u003e\n\n  - Separate your CSS (LESS) files into one file per section with a folder structure like so:\n\n    ```\n      common\n        -\u003e common.less\n        -\u003e reset.less\n        -\u003e variables.less\n        -\u003e layouts.less\n      public\n        -\u003e public.less\n        -\u003e login.less\n        -\u003e home.less\n      base.less\n    ```\n\n  - `@import` the other files that you need.\n\n    ```less\n      // in base.less\n      @import 'common/common.less';\n      @import 'public/public.less';\n\n      // in common.less\n      @import 'variables.less';\n      @import 'layouts.less';\n\n      // in public.less\n      @import 'home.less';\n      @import 'login.less';\n    ```\n\n  - Namespace each file so that you don't run into conflicts.\n\n    ```less\n      // in home.less\n\n      // bad\n      a.hero {\n        background: @purple;\n      }\n\n      // good\n      #home {\n        a.hero {\n          background: @purple;\n        }\n      }\n    ```    \n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='compatibility'\u003eBrowser Compatibility\u003c/a\u003e\n\n  - Major IE9 issues:\n      - A CSS stylesheet may contain up to a **maximum 4095 rules.** ([Telerik Tests](http://blogs.telerik.com/aspnet-ajax/posts/10-05-03/internet-explorer-css-limits.aspx))\n      - A stylesheet may `@import` up to a **maximum of 31 other sheets.**\n      - `@import` nesting supports up to a **maximum of 4 levels deep.**\n\n  - For additional cross browser issues and solutions refer to [Browser Hacks](http://browserhacks.com/)\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='testing'\u003eTesting\u003c/a\u003e\n\n  - Coming... needs more research\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='performance'\u003ePerformance\u003c/a\u003e\n\n  - Coming...\n\n  **[[⬆]](#TOC)**\n\n## \u003ca name='resources'\u003eResources\u003c/a\u003e\n\n  - [Decoupling your HTML, CSS, and JavaScript](http://philipwalton.com/articles/decoupling-html-css-and-javascript/) - Philip Walton\n  - [Writing Efficient CSS Selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) - Harry Roberts\n  - [Decouple Your CSS From HTML With Reusable Modules](http://thenittygritty.co/decouple-css) - Hans Christian Reinl\n  - [Front-end Code Standards \u0026 Best Practices](http://isobar-idev.github.io/code-standards/) - Isobar iDev\n  - [30 CSS Best Practices for Beginners](http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/) - Glen Stansberry\n\n  **[[⬆]](#TOC)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftether%2Fcss-html-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftether%2Fcss-html-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftether%2Fcss-html-style-guide/lists"}