Discussion about structure

[raphaelfabeni]

I thought a little bit about how the best way to structure the project but as I really wanted to have something online fast, I didn't put a lot of effort thinking about it.

Currently, we need to have something like to this to have the loader:

<!-- Initial state -->
<div class="loader loader-bar"></div>

<!-- Loader active -->
<div class="loader loader-bar is-active"></div>

In a first draft, I thought about having just one class without the loader but thinking like that each class of type of loader would repeat the default style of basic loader. So I decided to have class for it. I don't know if it's the best approach, but it's a first version. 😆

[akfzambrana]

I never liked using more than one or (in some cases) two classes, then I ask... What do you thing about using a placeholder selector instead this loader class?

[atilafassina]

If you want to go strict about having only one class, you could push the state class to a data-attras well.

Something like:

<div class="loader-bar" data-active="false"></div>

and the selector for .is-active would become something like:

[data-active=true]
// ...styles

But to be honest, I don't have a strong opinion about handling states in data-attr or an extra class if we have classList available

[raphaelfabeni]

Tell me more about it @akfzambrana ..

@atilafassina Now, thinking more about it, maybe I could use some data-attr, that now are used only for change the variation. Thanks.

[akfzambrana]

You have a class named loader that sets up the "basic properties" of all loaders. Maybe you can use a mixin or a placeholder insted.

Example:

%loader-base-config
  color: $loader--text-color
  position: fixed
  box-sizing: border-box
  left: -9999px
  top: -9999px
  width: 0
  height: 0
  overflow: hidden
  z-index: 999999

  &:after,
  &:before
    box-sizing: border-box
    display: none

  &.is-active
    background-color: $bg-loader
    width: 100%
    height: 100%
    left: 0
    top: 0

    &:after,
    &:before
      display: block

then in your "layout loader classes" you use like this:

.loader-bar 
  @extend %loader-base-config;
  ...

Is the same approach if you use a mixin (mixins are better if you use gzip)

The main idea is have only one class to call the loader with everything that it needs making it more independent 😄

And if some base properties changes between one loader an another, you don't need to overwrite them, just use the mixin's arguments to making them customized

[raphaelfabeni]

Hum I see!
I got it.. it makes sense!
I think the base properties doesn't change between loaders, so only one a mixin/placeholder could work.

I'll put this in my list for try to work on it in the next weeks.
Thanks a lot @akfzambrana
🤘

[raphaelfabeni]

@akfzambrana I only see one problem, that I don't know if it is a problem.
But I think that following this approach, in the main.css generated, we would have all the loader classes with the same repetition of basic config properties right?

[akfzambrana]

If you use placeholder, all the classes will concatenated in only one group of properties (see this example) is like we used to do before preprocessors arrive

If you use mixin, every class will have the same properties repeated (see this another example), but this isn't a problem if you gzip the final file, because the gzip algorithm improoves the repeated code making your file smaller.

[raphaelfabeni]

That's true @akfzambrana ! I forgot it.
I'll try to do this in the next releases.
Thanks a lot! :)

[raphaelfabeni]

After a LONG time ...
So I did some studies about this and I forgot about something simple.
I thought about the loader class holds the default styles thinking about the global CSS file. Because, thinking about a placeholder, it's a good idea to avoid repetitive code, but it would generate a big global CSS file. Something like:

.example1, example2, example3 {
/**/
}

And having a unique class to hold this default style we would have something like this:

.default {
/**/
}

I will close this issue and try to think in a near future avoid removing BEM and use only an aditional class. Something like: loader-example.

🤘