{"id":20485430,"url":"https://github.com/modularorg/modularcss","last_synced_at":"2025-04-13T14:53:57.446Z","repository":{"id":143774785,"uuid":"162052537","full_name":"modularorg/modularcss","owner":"modularorg","description":"▽ Dead simple modular CSS architecture.","archived":false,"fork":false,"pushed_at":"2018-12-26T23:28:08.000Z","size":1,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T14:53:51.382Z","etag":null,"topics":["architecture","css","modular"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modularorg.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","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}},"created_at":"2018-12-17T00:04:20.000Z","updated_at":"2020-11-17T13:42:14.000Z","dependencies_parsed_at":"2023-06-07T23:30:18.687Z","dependency_job_id":null,"html_url":"https://github.com/modularorg/modularcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modularorg","download_url":"https://codeload.github.com/modularorg/modularcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732512,"owners_count":21152851,"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":["architecture","css","modular"],"created_at":"2024-11-15T16:30:22.467Z","updated_at":"2025-04-13T14:53:57.439Z","avatar_url":"https://github.com/modularorg.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/modularbp/modular-boilerplate\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/4596862/37635200-aa3271b2-2bd0-11e8-8a65-9cafa0addd67.png\" height=\"140\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003emodularCSS\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA dead simple modular CSS architecture.\u003c/p\u003e\n\n## Naming\n```postcss\n.module .module_child .-option\n```\n\n## What\n- Everything is a module.\n- A module is self-contained.\n- Don't modifiy other modules from it.\n- The goal is reusability.\n\n## How\n- Every styled element has a class, don't use ids.\n- Stick to single level, use options, not nesting.\n- That way you'll keep the same low specificity and element flexibility.\n\n## When\n- Start with bigger modules.\n- Don't repeat yourself.\n- Break them down into smaller modules, if part of them is needed.\n- Eventually, you'll know when to create new modules.\n\n## Examples\n#### Module example\n```html\n\u003cdiv class=\"module\"\u003e\n    \u003cdiv class=\"module_child\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"module_child -option\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```postcss\n.module {\n    background-color: silver;\n}\n\n.module_child {\n    background-color: gray;\n\n    \u0026.-option {\n        background-color: red;\n    }\n} \n```\n#### Complex nesting and naming\n```html\n\u003cdiv class=\"moduleName -small\"\u003e\n    \u003cdiv class=\"moduleName_childName\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"moduleName_childName -option\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```postcss\n.moduleName {\n    background-color: silver;\n    font-size: 18px;\n\n    \u0026.-small {\n        font-size: 14px;\n    }\n}\n\n.moduleName_childName {\n    background-color: gray;\n    padding: 40px;\n\n    \u0026.-option {\n        background-color: red;\n    }\n\n    @nest .moduleName.-small \u0026 {\n        padding: 20px;\n    }\n} \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodularorg%2Fmodularcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularcss/lists"}