https://github.com/escss-labs/escss

The progressive methodology
https://github.com/escss-labs/escss

bem-methodology css e2e-testing html javascript scss tailwindcss

Last synced: 2 months ago
JSON representation

The progressive methodology

• Host: GitHub
• URL: https://github.com/escss-labs/escss
• Owner: ESCSS-labs
• License: other
• Created: 2024-09-02T02:41:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-12-18T16:36:53.000Z (4 months ago)
• Last Synced: 2025-12-20T06:43:34.930Z (4 months ago)
• Topics: bem-methodology, css, e2e-testing, html, javascript, scss, tailwindcss
• Homepage:
• Size: 4.03 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
![logo](./assets/logo.png)

# What is ESCSS?

ESCSS (pronounced "escapes") is **the progressive methodology** based on [BEM](https://en.bem.info/) & [The Mythical Man-Month](https://en.wikipedia.org/wiki/The_Mythical_Man-Month)

## Why?

  - 🔥 Bring Clarity to HTML/CSS/JS Project

  - 💪 ID-Based E2E Simplicity

  - 🤝 Harmony with CSS, SCSS and Tailwind

  - 💣 Don't care about CSS specificity

  - ❤️ Clean CSS DevTools Experience

  - 🪶 Smaller CSS sizes

  - ⬇️ Clean HTML

  ![image](./assets/cable-management.png)

## Emoji for Visualization (Optional)

  - (🏗️)LayoutComponent

  - (🏠)page-component -> `kebab-case` for URL-related page components.

  - (🔩)SharedComponent

  - (🧱)Component

## Naming Convention:

- PascalCase: 

  - 🧱CardList (see `CardList.vue`, `CardList.jsx`)

- Only `First` / `Last` word matters:

  - 🧱CardList__Title

  - 🧱CardList__X__Address

  - 🧱CardList__X__X__Name

- compressed with gzip:

  - `__X` <- repeated pattern

- What if ...?

  ```html

  

  

  

  

      


        

      


      


          


              


              


              


              


      

  

  


  

  

      


        

      


      


          


              


              


              


              


      

  

  ```


## Status class:

```html

Demo

```


``` html

Demo

```

``` scss

#🧱CardList {

  background: blue;

}


.--active {

  background: red !important;

}

```