SEM
Writing CSS code the smart way
SEM [sɛ:m] is a methodology for writing and organizing CSS code. It stands for: "sets of elements and mixes". The main idea behind SEM is to create one-property classes (.elements {}), combine them into compound ones (._mixes {}) and form sets of both. SEM is not a mock to BEM or any other methodologies like ACSS, SMACSS, OOCSS, etc. Probably, it has similarities but introduce different ideas and features. For more information please go to the Docs section.
Preface
SEM is born as a consequence of the development of elementcss - Sass library for fast GUI prototyping. It took over than 2 years before rules, terms and key concepts are determined by the practice. As a result, methodology not only introduce some new level of abstraction, but make it possible to share CSS code, scale indefinitely, style document in WYSIWYG-like editor and work with new coming Web Components in convenient way.
Documentation
- Guide. Step-by-step guide into SEM
- Conventions. SEM conventions for naming and organizing CSS code
- SEM + Sass =
❤ . How to get most of using SEM and Sass
Examples
Once you look at the code, the Guide might become just a complement to your intuitive feelings. So before going deeper, I strongly recommend just to walk through one of the examples:
- index.html - "Hello world" example (preview)
- index.html + main.css - Personal webpage (preview)
- index.html + main.css - Birthday gift card (preview)
Contributing?
If you have time and find SEM useful, feel free to open an issue for whatever reason you have: typos, contradictions, better ways to explain, organize, etc. Thank you!