Namespacing Mixins (a simple / useful trick)

Now the issue with doing a ton of easy-post-item or helper functions is you'll eventually run into naming conflicts.

For example, you used fancy-link as a mixin and now you can't use that again without inheriting those styles.

There's a Namespace trick for this! Checkout the example below:

Table of Contents

    #nicks-secret-css-shortcut-library {
    
        .easy-post-item() {
            // ... all that CSS code from before
        }
    
        .fancy-link() {
            // ..
            // ..
            // ..
        }
    
        // Etc...
    
    }
    

    Then you can call your Mixins like this:

    .post-item {
        #nicks-secret-css-shortcut-library .easy-post-item;
    }
    
    .read-more {
        #nicks-secret-css-shortcut-library .fancy-link;
    }

    Now, let's say you wanted to create a class called fancy-link you could do so worry free.

    You can use "!important" with mixins

    Like every other front-end developer, I like to use !important sparingly. However, there are sometimes legitimate use cases for it beyond just your CSS has gotten completely out of control.

    Here's how to do this with mixins:

    .post-item {
        #nicks-secret-css-shortcut-library .easy-post-item !important;
    }