When contributing code to any Massively Modified project, there are some guidelines to follow to expedite the time neccessary to get your contributions merged. The following are the Naming Conventions used when contributing CSS to an applicable Massively Modified project.
If you like our software, please consider making a donation. Donations help greatly to maintain the Massively Modified network and continued support of our open source offerings:
Table of Contents
- Become a Member (coming soon!)
- Contribute Code
- Test Code
- Adhere to Our Coding Standards
- Adhere to Our CSS Naming Conventions
- Make a Donation
The CSS Naming Convention
We are making use of a custom naming convention we have termed EEM, or Entity Element Modifier. We really liked the concept behind the BEM naming convention, but did not care too much for the length of the names we'd see using the convention. Our convention follows the same principles, but makes use of a syntax that we prefer. As a result, you will see a mixture of both styles, as Material Design follows the BEM naming convention, and we are not here to rewrite Material Design - only to wrap it!
Use the Modified BEM naming convention here a.k.a. EEM:
- The Entity to be modified. The entity is something abstract; a thing with distinct and independant existence. It should be named with a noun. Something that signifies what it is/does if what it is doesn't already have a perfect name which does so.
- The Element is a part or aspect of something abstract (the entity). It should be named with a noun/adjective (something describing an attribute, used to modify a noun it is related to)
- Verb-Adverb/Adjective. The modifier is something that makes partial or minor changes to something.
Write your names like so:
<a href="" class="box_element+modifier">Some Title</>
And think of it like this:
The box is the main object we are styling. The element is the child item or specific property of the object that we are targeting with our style.
The modifier is a difference we are imposing upon the item from the norm.
I love using the plus sign as a modifier. It's typically a standard to write names which are compound words using a hyphen to separate the words. So it is counter-intuitive to use hyphens (or a minus sign) to denote a removal of a property. Therefore, if you want to signify a removal, just tack
no-to the beginning of a modifier name to indicate a removal of a style.
i.e. in HTML
Comparing BEM & EEM
The Massively Modified approach is meant to shorten the length of names that you'd get using straight BEM while still proposing the same basic structure to naming that BEM provides, which is helpful in organizing CSS styles. The element/modifier approach helps greatly in organizing styles because it helps you more easily visualize what a style is doing to an element. Here's a comparison between straight BEM vs MEM or EEM:
Visually, its not all that much different. But EEM saves 3 key-strokes in html, 2 in CSS, looks better, and provides the same benefits. It also plays well with BEM and allows us to have a clean separation - let's say - between Material Design and our own contributions.
Conclusion? When submitting a merge request to anything Massively Modified: please ensure you use EEM naming conventions for all SCSS/CSS.
To view the license for the documentation provided by this wiki, please visit the Wiki Homepage