[Solved] CSS modules and global scope

[Threesugars]

I’m currently working on a project where I’m using Angular and we’re splitting our css into modules based on the directives we’re using.

The issue I’m facing, is finding a way of reusing styles without making global classes like .wrap.

For example, I have a header element called <page-header>

At the moment, I also have a global class called .wrap which I want to apply to it. It looks something like this:

.wrap {
max-width: 640px;
margin: 0 auto;
}

But I keep hearing that global classes are a big no no when trying to make your styles modular. What I can’t get my head around, if that if I wanted to use this style on multiple elements as it was intended, I’d end up with a lot of duplicate code. For example:

element-1 {
max-width: 640px;
margin: 0 auto;
... more styles below
}

element-2 {
max-width: 640px;
margin: 0 auto;
... more styles below
}

The class is intended to be used in multiple cases so you can imagine the amount of duplication it would lead to.

So I was wondering, do you have any suggestions on how I can make the wrap class more modular while not creating loads of duplication?

[shaneisme]

I suppose it depends on your goals.

If your new modules are going to be used in many projects, each with different definitions of their own .wrap, you might want to be more explicit. But that’s assuming your module is just that: a small module.

If these modules are only going to be used in a single project, or a few that have the same definition of .wrap, using a global class like that is exactly what you want to do.

It’s only when you want to make sure your module does the same thing no matter what’s going on around it that you want to get out of the global ‘scope’ by adding on a prefix or something.

[Threesugars]

Much appreciated insight :) Thanks!

[Author]

Posts