Hacker News new | past | comments | ask | show | jobs | submit login

This is a very deep insight on CSS preprocessor topic. I have used the phrase "a bit better" intentionally, so that I do not dive deep into it.

Would you be so kind to give some comments on this thing: https://github.com/brainly/style-guide ?




I can tell we're aligned regarding CSS architecture - and also regarding Angular. :)

The style guide you linked is very clear and concise in explaining why BEM is great without being a panacea - it's ugly, but it's simple, predictable and solves many of the issues which arise with CSS nature (e.g. everything in CSS is global). I also liked the emphasis on having BEM as a naming convention, no more.

Regarding how you introduce BEM, I would only:

* Reinforce the idea that a BEM compliant worflow would typically allow developers to change mark-up without having to look up stylesheets and vice-versa;

* Reinforce how much it would typically reduce side-effects!

I'd also give a few words on the topic of using the preprocessor (mixins, extends and, obviously, variables) to achieve DRYness.

* My argument to my team was to have readable semantic and obvious classnames (without style references in the name, e.g. no .blue-widget) which are "composed" via SASS (and SASS constructs might have style references in the name e.g. my-button @extends %blue-button);

* The other argument, and the one I actually believe `philosophically is that this allows you transfer the object-composition duty from the browser to the build process. It just makes sense to me: why have thousands of clients composing styles (e.g. button class="btn btn-lg btn-primary") when this is predictable ahead-of-time (button class="my-btn", where .my-btn = @make-btn(lg, primary)). This gives you performance and, as I said above, the possibility to have readable class names - I don't exactly know what "btn btn-lg btn-primary" might be, but "btn-login" is quite obvious.

In your contributing guidelines I noticed you have @extends with classes (e.g. @extend .mint-list). I use placeholders instead of classes to avoid side effects which are difficult to predict (even more so when you have a team with different levels of expertise). Here's why: http://csswizardry.com/2014/01/extending-silent-classes-in-s....

I'd also reinforce the notion - as less experienced developers do this quite often - of the different concerns of HTML (structure) and CSS (style). Newcomers to HTML seem to believe that HTML is a GUI mark-up language and, ergo, it shouldn't be problematic to use it as a presentational layer. As a practical example, "newcomers" usually have HTML elements only for presentational purposes, such as <div class="shadow"> or a list item used as a divider between other list items. I usually spend a few minutes of my time explaining how to avoid this using e.g. :before and/or :after.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: