Naming conventions for responsive variables in SuitCSS

Question

I recently started using suitCSS naming conventions in my Sass (not using default PostCSS setup) and it's not clear what's the correct way of naming variables:

Variables used inside of component's media queries. In official docs, I only saw the reference for using responsive utilities, but no conventions for responsive variables. For examples let's take this code:

.MyComponent {
    margin-left: $MyComponent-marginLeft;

    @include media('sm') {
        margin-left: $sm-MyComponent-marginLeft;
    }
}

What variable name should I use? $u-sm-MyComponent-marginLeft or $sm-MyComponent-marginLeft and why?

And the other question is about nested variables and/or inside of pseudo-classes.

.Nav-listItem {
    &:last-child {
        .Nav-link {
            margin-right: $Nav-listItem-onLastChild-NavLink-marginRight;
        }
    }
}

Answer 1

Disclaimer: opinion based answer

As you have said for your particular case the documentation is not entirely clear. So you can choose how you name them. The important thing is that you are consistent in your naming and that other developers are clear what the conventions are.

Responsive variables

For the naming of responsive variables I would choose the following convention

$BaconComponent-marginLeft-sm
$BaconComponent-marginLeft-md
$BaconComponent-marginLeft-lg

Why?

For me this reads logically, sm, md, lg are a subset of marginLeft and therefore should proceed marginLeft. When grouped together, as above, it is easy to scan as it is the last characters of the variable that are different.

A similar example can be seen here.

Nested variables

From the docs:

Components should not expose the internal structure. Variables used in components should have a flat structure after their namespace.

Your naming here is too explicit of the internal structure of the component. I would suggest something like

$Nav-listItem-lastItem-marginRight

I think this describes the use of the variable better.