Published By Joshua Sandoval

Twitter Facebook MERGE: A New CSS Methodology


Modules. Elements. Removes. Globals. Exclusives. These are the core components of MERGE. Albeit, in order of specificity they are: elements, modules, globals, removes and exclusives—but that's not as easy to remember as "M-E-R-G-E".

General Syntax of MERGE:

Before we get into the insight of MERGE, let's go over the basic syntax style that we be using for all of our components. The syntax for MERGE is fairly unique and draws minor inspiration from parts of BEM, but much more simplistic. Each component has the exact same naming structure, as to keep things simple. Here is how you start each component:

*.element_name { /* Element specific CSS */ }
*.module_name { /* Module specific CSS */ }
*.global_name { /* Global specific CSS */ }
*.remove_property { /* Remove specific CSS */ }
*#exclusive_name { /* Exclusive CSS */ }

Here is how you extend each component, for variants:

*.element_name-variant { /* Element (variant) specific CSS */ }
*.module_name-variant { /* Module (variant) specific CSS */ }
*.global_name-variant { /* Global (variant) specific CSS */ }
*.remove_property-variant { /* Remove (variant) specific CSS */ }
*#exclusive_name-variant { /* Exclusive (variant) CSS */ }

It's really that simple! For each variant of a variant however, you simply extend the dash (-). For example: *.module_name-variant-variant {}. The hope of this system is that specificity is kept at a minimum. You may combine the syntax with regular CSS. However now, notice the order. With MERGE, the order of CSS equals the order of specificity, so it's important to have each component ordered as above.

The “Element” component.

Simply put, the "element" component is a way to keep CSS specificity low for elements (to prevent overriding) that would otherwise require a high specifity to style at all. For example, form elements. Unfortunately, this requires one to always apply a class to the base element, however, it isn't necessary for most elements such as heading and anchor tags.

*.element_input-range { /* Element specific CSS */ }
/* instead of */
input[type="range"] { /* Element specific CSS */ }

The “Module” component.

Modules are complex trees of elements. I prefer for MOST modules, to add the absolute bare minimum for styling. Having the absolute bare shell, and styling them with GLOBALS. This way, code is cleaner, modular, and adaptive. Here's an example of what I mean, built directly into LoadstarCode:

<div class="module_chip"> <div> <span><img src="../../../assets/images/logo/logo.png" alt="LoadstarCode logo"></span> <span><span>I am a chip module!</span></span> </div> </div>

Which creates:

LoadstarCode logo I am a chip module!

However, with globals:

<div class="module_chip global_card global_inline-block global_padding-all global_margin-vertical global_rounded-medium"> <div> <span class="global_icon-tiny global_margin-right"><img src="../../../assets/images/logo/logo.png" alt="LoadstarCode logo"></span> <span><span>I am a chip module!</span></span> </div> </div>

Which creates:

LoadstarCode logo I am a chip module!

As you can tell, it's quite expansive, and I can already say the possibilities it unlocks are monumental.

The “Global” component.

GLOBALS are "global" modifications to MODULES or ELEMENTS. They can be simple or complex, but consist of one element, and can have no children. However, they may have pseudo selectors attached. A great example of a global would be site-wide responsive padding, margins, borders, font-size, ect. I specifically like to have one singular class that controls the padding and font-size. It's particularly useful as it's global and if a device needs optimizing, it can be done fairly easily.

*.global_responsive, *.global_responsive-paddingonly { padding: 0px 8px; }
*.global_responsive, *.global_responsive-textonly { font-size: 1em; }

The “Remove” component.

REMOVES purpose are to "remove" specific CSS properties off of ELEMENTS, MODULES and GLOBALS, sometimes EXCLUSIVES. This is especially useful if you want have part of the effect of a global, without a specific property attached. Here is an example.

<div class="global_card global_inline-block global_rounded-small"> <span class="global_block global_padding-all">Hello World!</span> </div>

Which creates:

Hello World!

However, with removes:

<div class="global_card global_inline-block global_rounded-small"> <span class="global_block global_padding-all remove_padding-left">Hello World!</span> </div>

Which creates:

Hello World!

As you can tell, it's mostly used for small changes. However, that doesn't mean they don't matter.

The “Exclusive” component.

Exclusives are either simple or complex trees of elements that start with a ID. The term "exclusive" comes from the fact that IDs are one of a kind on a page. Given the nature of IDs, exclusives are placed at the bottom of the stylesheet, as naturally they are at near top of the specificity. Exclusives are particularly useful for elements that require either max specificity, like what you would want for a site header or footer, or if it is a modular piece of code that requires elements inside it that require an ID in themselves, such as a checkbox or radio button. Given their nature, they're not very easy to demo, however, feel free to play around with LoadstarCode's site-wide header. Perhaps even look at the code that builds it.

Wrapping it all together.

That is MERGE, a new CSS methodology. I do hope others may at least find some inspiration in MERGE, and perhaps even create their own CSS methodology. I have found the structure helps myself keep code clean and modular. Have fun programming. :D