The scalable way to write UI

SEM [sɛ:m] is a CSS coding methodology that stands for "Sets of Elements and Mixes". SEM simplifies CSS development by following three key steps:

1. Use single-property classes (elements):

   .element1 { property: value; }
   .element2 { property: value; }

2. Combine them into mixes when necessary:

   ._mix {
     .element1, .element2;
   }

3. Organize sets (sorted by property name):

   /* Set */
   .p-1 { padding: 1rem; }                /* Element */
   .p-2 { padding: 2rem; }                /* Element */
   
   /* Set */
   .c-blue { color: blue; }               /* Element */
   .c-red { color: red; }                 /* Element */
   
   /* Set */
   .bg-white { background: white; }       /* Element */
   
   ._btn { .p-1, .c-blue, .bg-white; }    /* Mix (using preprocessors) */

SEM is not an imitation of BEM or other methodologies like ACSS, SMACSS, or OOCSS. It introduces a different approach to organizing simple, highly scalable GUIs. SEM originated from the development of elementcss, a Sass library for rapid GUI prototyping. Over two years, rules, terms, and key concepts were refined through practical experience. Consequently, this methodology not only introduces a new level of abstraction but also facilitates code sharing, indefinite scalability, and WYSIWYG-like styling.

• Guide: Step-by-step introduction to SEM
• Conventions: SEM conventions for naming and organizing CSS code
• SEM + Sass = ❤: Maximizing the benefits of using SEM and Sass

Before exploring the details, I recommend reviewing the examples. These serve as practical introductions, providing an understanding of SEM in action:

• index.html: "Hello world" example (preview)
• index.html + main.css: Personal webpage (preview)
• index.html + main.css: Birthday gift card (preview)

Please feel free to report any issues, suggest improvements, and point out typos.