Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Major Overhaul #53

Closed
nanaya opened this issue Sep 5, 2015 · 3 comments
Closed

CSS Major Overhaul #53

nanaya opened this issue Sep 5, 2015 · 3 comments

Comments

@nanaya
Copy link
Collaborator

nanaya commented Sep 5, 2015

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.

@nanaya nanaya mentioned this issue Sep 5, 2015
@claudiodekker
Copy link
Contributor

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
Copy link

kawaii commented Sep 5, 2015

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
Copy link
Collaborator Author

nanaya commented Mar 6, 2017

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

The bem seems to be mostly working.

@nanaya nanaya closed this as completed Mar 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants