{"id":30028703,"url":"https://github.com/pocketsize/naming-conventions","last_synced_at":"2026-02-23T07:02:20.561Z","repository":{"id":98377696,"uuid":"130342755","full_name":"pocketsize/naming-conventions","owner":"pocketsize","description":"Official HTML and SCSS style guide for all Pocketsize projects.","archived":false,"fork":false,"pushed_at":"2019-02-04T15:27:34.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-25T05:51:34.729Z","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/pocketsize.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-04-20T09:45:19.000Z","updated_at":"2021-03-10T18:04:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"acb99045-b53e-42e5-b284-d9d9a4c61c0a","html_url":"https://github.com/pocketsize/naming-conventions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pocketsize/naming-conventions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fnaming-conventions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fnaming-conventions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fnaming-conventions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fnaming-conventions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pocketsize","download_url":"https://codeload.github.com/pocketsize/naming-conventions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fnaming-conventions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29739024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T04:51:08.365Z","status":"ssl_error","status_checked_at":"2026-02-23T04:49:15.865Z","response_time":90,"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":"2025-08-06T15:58:56.798Z","updated_at":"2026-02-23T07:02:20.548Z","avatar_url":"https://github.com/pocketsize.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pocketsize Naming Conventions\n\nBase rule: `{block}-{element} [is/has]-{modifier}`\n\nThe block part of the class should describe the scope.\nThe element part of the class should describe what the element is.\nOnly the modifier class can describe what the element looks like.\n\nWhen you need to add another element in your mark-up for styling purposes that serves no purpose without the element it's wrapping or contained within it should be named as follows:\n* `{block}-{element}-outer` for outer elements\n* `{block}-{element}-inner` for inner elements\n\n## Examples\n\nHere are a couple of code examples.\n\n### HTML\n\n```html\n\u003csection class=\"page\"\u003e\n\t\u003cdiv class=\"page-inner\"\u003e\n\t\t\u003ch2 class=\"page-title\"\u003eThe Title\u003c/h2\u003e\n\n\t\t\u003cdiv class=\"page-content\"\u003e\n\t\t\t\u003c!-- begin classless content (usually from cms or other data source) --\u003e\n\t\t\t\u003cp\u003eHere's the content. This is a paragraph and below is a list.\u003c/p\u003e\n\t\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003eList item 1\u003c/li\u003e\n\t\t\t\t\u003cli\u003eList item 2\u003c/li\u003e\n\t\t\t\t\u003cli\u003eList item 3\u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\t\u003c!-- end classless content --\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"page-links\"\u003e\n\t\t\t\u003cdiv class=\"page-link-outer\"\u003e\n\t\t\t\t\u003ca href=\"#\" class=\"page-link\"\u003eA link\u003c/a\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"page-social-icons\"\u003e\n\t\t\t\u003cdiv class=\"page-social-icon-outer\"\u003e\n\t\t\t\t\u003ca class=\"page-social-icon is-facebook\" href=\"https://www.facebook.com\"\u003e\u003c/a\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"page-social-icon-outer\"\u003e\n\t\t\t\t\u003ca class=\"page-social-icon is-instagram\" href=\"https://www.instagram.com\"\u003e\u003c/a\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/section\u003e\n```\n\n### SCSS\n\nApart from the Bolts reset, we do not write global styles. For common styles we create shadow classes that we extend on the relevant elements in each block scope.\n\n```scss\n%title {\n\tfont-weight: 700;\n}\n\n%title-primary {\n\t@extend %title;\n\tfont-size: 2em;\n}\n\n%title-secondary {\n\t@extend %title;\n\tfont-size: 1.5em;\n}\n\np,\nul {\n\t%wysiwyg \u0026 + \u0026 {\n\t\tmargin-top: 1em;\n\t}\n}\n\n%wysiwyg {\n\tp,\n\tli {\n\t\tline-height: 1.6;\n\t}\n}\n\n.page {\n\t\u0026-inner {\n\t\t@include container;\n\t}\n\n\t\u0026-title {\n\t\t@extend %title-primary;\n\t}\n\n\t\u0026-content {\n\t\t@extend %wysiwyg;\n\t}\n\t\n\t\u0026-links-title {\n\t\t@extend \u0026title-secondary;\n\t}\n\t\n\t\u0026-links {\n\t\t@include inline-layout(20px);\n\t}\n\t\n\t\u0026-link-outer {\n\t\t@media ( width-to(medium) ) {\n\t\t\twidth: 50%;\n\t\t}\n\t\t@media ( width-from(medium) ) {\n\t\t\twidth: 25%;\n\t\t}\n\t}\n\t\n\t\u0026-link {\n\t\tdisplay: inline-block;\n\n\t\t\u0026:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t\u0026-social-icons-title {\n\t\t@extend \u0026title-secondary;\n\t}\n\n\t\u0026-social-icons {\n\t\t@include inline-layout(10px);\n\t}\n\n\t\u0026-social-icon {\n\t\tdisplay: block;\n\t\twidth: 20px;\n\t\theight: 20px;\n\n\t\t\u0026.is-facebook  {\n\t\t\t@include background('../images/facebook.png');\n\t\t}\n\t\t\u0026.is-instagram {\n\t\t\t@include background('../images/instagram.png');\n\t\t}\n\t}\n}\n```\n\n#### Indentation\n\nWe indent using tabs in the first level. To align \"columns\" we use spaces. We don't mix tabs and spaces.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocketsize%2Fnaming-conventions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpocketsize%2Fnaming-conventions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocketsize%2Fnaming-conventions/lists"}