CSS Major Overhaul

[nanaya]

As I (not so) recently learned, I've been violating a lot of efficient css guidelines. I've been trying to reduce the problem by implementing BEM in a few places but it's still pretty much over my head (and I think I did it incorrectly).

At least newly written CSS should conform the guidelines and going forward a major rewrite will save a lot of headaches (or so I hope).

Another thing is it's slightly easier doing BEM with LESS (which I just discovered last week):

.block {
  ...
  &__element { ... } // will turn into .block__element

  &--modifier { ... } // will turn into .block--modifier
}

Also, all javascripts related classes should always be prefixed with js- so no one (mainly me) won't accidentally break javascripts by moving/renaming/adding things around.

Lastly, visiting the site shouldn't double as system stability test (store products listing page, for example, causes my laptop to go on fire by having it open for a while).

tl;dr: I suck at CSS. Someone pls2halp.

[claudiodekker]

After 1.5 hours of discussion and headaches between @nanaya and me, I think the conclusion on BEM blocks within elements, is that one element should become both the parent block and a child element (mix-in).

For example:

<ul class="statistics">
        <li class="statistics__item statistic">
                <span class="statistic__item">Ranked Score</span>
                <span class="statistic__item--strong">..</span>
        </li>
        <li class="statistics__item statistic">
                <span class="statistic__item">Hit Accuracy</span>
                <span class="statistic__item--strong">..</span>
        </li>
</ul>

Please note how the li's here are both statistics__item (elements) and statistic (blocks).
A good explanation of why this is (most probably) the best solution can be found here

---

Of course, styles could conflict in this situation. To get around this issue, we can create a bridge between the block and the element using an exception to BAM in CSS:

.statistics__item.statistic {
        border-color: #555;
}

This way, the blocks and elements stay separated without breaking anything when using them standalone, but we can still achieve what we want when used together.

---

If you can find and prove a better solution (that doesn't conflict with the fabrics of the universe), then please let us know.

[kawaii]

One thing that causes a huge amount of GPU memory load is the moving triangles in the background of the navigation, you could actually see this by removing the node or adblocking it whilst having the show FPS meter enabled (Press escape on the console -> rendering). also
Google's Optimizing Performance can be useful to look through.

[nanaya]

slowly done (and still ongoing) ┐(ﾟ ヮﾟ)┌

The bem seems to be mostly working.