{"id":31710438,"url":"https://github.com/asrieldreemurrgm/css_best_practices","last_synced_at":"2026-05-08T13:36:57.129Z","repository":{"id":252182746,"uuid":"836033690","full_name":"AsrielDreemurrGM/CSS_Best_Practices","owner":"AsrielDreemurrGM","description":"Practical study of CSS best practices, applying SMACSS and BEM methodology. Includes examples of layout, modules, themes, forms, and interactive UI components.","archived":false,"fork":false,"pushed_at":"2025-09-10T22:08:41.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-09T00:28:19.254Z","etag":null,"topics":["accordion","bem-methodology","button","css","form","html5","inline-javascript","javascript","sass","scss","smacss","theming","ui-components"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/AsrielDreemurrGM.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-31T03:08:54.000Z","updated_at":"2025-09-10T22:09:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5bede06-8c35-4b0a-be25-d7857702f2e4","html_url":"https://github.com/AsrielDreemurrGM/CSS_Best_Practices","commit_stats":null,"previous_names":["asrieldreemurrgm/boas_praticas_de_css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AsrielDreemurrGM/CSS_Best_Practices","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AsrielDreemurrGM%2FCSS_Best_Practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AsrielDreemurrGM%2FCSS_Best_Practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AsrielDreemurrGM%2FCSS_Best_Practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AsrielDreemurrGM%2FCSS_Best_Practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AsrielDreemurrGM","download_url":"https://codeload.github.com/AsrielDreemurrGM/CSS_Best_Practices/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AsrielDreemurrGM%2FCSS_Best_Practices/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32078914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"last_error":"SSL_read: 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":["accordion","bem-methodology","button","css","form","html5","inline-javascript","javascript","sass","scss","smacss","theming","ui-components"],"created_at":"2025-10-09T00:27:27.263Z","updated_at":"2026-04-21T05:33:14.990Z","avatar_url":"https://github.com/AsrielDreemurrGM.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eCSS Best Practices\u003c/h1\u003e\n\u003cp\u003e\n  Este README também está disponível em \u003ca href=\"./README.pt-br.md\"\u003ePortuguês\u003c/a\u003e.\n\u003c/p\u003e\n\u003cp\u003e\n  This repository contains practical examples and studies of CSS best practices, focusing on both SMACSS (Scalable and Modular Architecture for CSS) and BEM (Block Element Modifier) methodology. Each file includes comments explaining the concepts, with demonstrations of layout, modules, themes, forms, buttons, and interactive components.\n\u003c/p\u003e\n\u003ch2\u003eTopics Covered\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003eSMACSS (Base, Layout, Modules, State, Theme)\u003c/li\u003e\n  \u003cli\u003eBEM Methodology (Block Element Modifier)\u003c/li\u003e\n  \u003cli\u003eCSS / SASS / SCSS\u003c/li\u003e\n  \u003cli\u003eHTML5\u003c/li\u003e\n  \u003cli\u003eJavaScript (Accordion Components)\u003c/li\u003e\n  \u003cli\u003eForms and Buttons\u003c/li\u003e\n  \u003cli\u003eTheming (Tema A / Tema B)\u003c/li\u003e\n  \u003cli\u003eUI Components\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eExamples Included\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cb\u003eSMACSS Folder:\u003c/b\u003e Layouts, modules, themes, accordions, and UI messages.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eBEM Folder:\u003c/b\u003e Forms with BEM methodology applied using CSS and SASS.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eHow to Use\u003c/h2\u003e\n\u003cp\u003e\n  Open the \u003ccode\u003eindex.html\u003c/code\u003e file in the respective folder (SMACSS or BEM) in a browser to explore the examples. Examine the CSS/SASS files to understand how SMACSS and BEM are implemented. JavaScript is included for interactive elements like accordions.\n\u003c/p\u003e\n\u003ch2\u003eTechnologies Used\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003eHTML5\u003c/li\u003e\n  \u003cli\u003eCSS / SASS / SCSS\u003c/li\u003e\n  \u003cli\u003eJavaScript\u003c/li\u003e\n  \u003cli\u003eSMACSS Architecture\u003c/li\u003e\n  \u003cli\u003eBEM Methodology\u003c/li\u003e\n  \u003cli\u003eForms, Buttons, Accordion Components\u003c/li\u003e\n  \u003cli\u003eTheming\u003c/li\u003e\n  \u003cli\u003eUI Components\u003c/li\u003e\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasrieldreemurrgm%2Fcss_best_practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasrieldreemurrgm%2Fcss_best_practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasrieldreemurrgm%2Fcss_best_practices/lists"}