https://github.com/asrieldreemurrgm/css_best_practices

Practical study of CSS best practices, applying SMACSS and BEM methodology. Includes examples of layout, modules, themes, forms, and interactive UI components.
https://github.com/asrieldreemurrgm/css_best_practices

accordion bem-methodology button css form html5 inline-javascript javascript sass scss smacss theming ui-components

Last synced: 3 months ago
JSON representation

Practical study of CSS best practices, applying SMACSS and BEM methodology. Includes examples of layout, modules, themes, forms, and interactive UI components.

• Host: GitHub
• URL: https://github.com/asrieldreemurrgm/css_best_practices
• Owner: AsrielDreemurrGM
• Created: 2024-07-31T03:08:54.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-09-10T22:08:41.000Z (11 months ago)
• Last Synced: 2025-10-09T00:28:19.254Z (10 months ago)
• Topics: accordion, bem-methodology, button, css, form, html5, inline-javascript, javascript, sass, scss, smacss, theming, ui-components
• Language: HTML
• Homepage:
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
CSS Best Practices



  Este README também está disponível em Português.





  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.



Topics Covered



  
SMACSS (Base, Layout, Modules, State, Theme)

  
BEM Methodology (Block Element Modifier)

  
CSS / SASS / SCSS

  
HTML5

  
JavaScript (Accordion Components)

  
Forms and Buttons

  
Theming (Tema A / Tema B)

  
UI Components



Examples Included



  


SMACSS Folder: Layouts, modules, themes, accordions, and UI messages.

  


BEM Folder: Forms with BEM methodology applied using CSS and SASS.



How to Use



  Open the index.html 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.



Technologies Used



  
HTML5

  
CSS / SASS / SCSS

  
JavaScript

  
SMACSS Architecture

  
BEM Methodology

  
Forms, Buttons, Accordion Components

  
Theming

  
UI Components