Harry Roberts

This is not a goods approach imho.

When I'm the html/css guy on a team, it makes my work super frustrating to have to deal with devs who preemptively try to break down everything into smaller bits. It gets in the way of iteratively improving my templates and css throughout a project.

The solution is simple.

First, you should use the "bottom margins only" approach wherever possible, cf. CSS best practice "use single directions margins only".

https://csswizardry.com/2012/06/single-direction-margin-declarations/

If the Vue/React devs I worked this even understood just this, and put single direction margins in their components, there would be less issues already with collapsed margins and/or unintended vertical spacings.

Even better, just get rid of the spacing margins in the component altogether as the article suggest. But instead of creating more abstraction with "spacer" components, you simply add tailwind-style classes on your components such as list items, in the PARENT component's template.

Then the html/css guy till has full control over the templating, it's fluid and simple to edit, and there is no headaches with abstract "spacer" components that also add unnecessary complexity and indentation in the templates.

The main issue with "spacer" components is that in the end, the design is never this regular, There are always exceptions to the rule, and they are much more easily handled as I said by using atomic css classes like tailwind's `mb-*` in the PARENT template…

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…

Seriously. To my sibling comments: show me an article about how great lisp or vim is that takes 2.5k words to get to its position statement. That's an introduction that's 50% of the length of the article! I don't mind long articles, but ill-proportioned intros seem like a bad idea.

Incidentally, that position statement is ridiculously vague and anodyne:

Principles of the New Web Typography

1. We must prioritise the text over the font, or semantics over style.

2. We ought to use and/or make tools that reveal the consequences of typographic decisions.

3. We should acknowledge that web typography is only as strong as its weakest point.

Who's going to disagree with these? As best I can tell, these translate to:

1. Don't be afraid to show sub-optimal typography until your nicer font loads. Physical books never had to worry about load times.

2. Write better tools and share them. For now use Tachyons or Basscss, as a modern equivalent of a https://en.wikipedia.org/wiki/Type_case.

3. Try to keep your CSS selectors about the same length[1]. Read and internalize http://csswizardry.com/2014/10/the-specificity-graph.

Like parent, I say all this with love. If it got me to read it all (albeit over the course of a day), it's doing something right.

[1] I'm not sure about this, since http://cssguidelin.es/#specificity seems to suggest that specificity is the number of tags in your html that are selected by a selector. But that doesn't seem to be quite what OP means, unless I…

The issue I took was that in the HN submission you position them as best practices, but when questioned on them you said they are just guidelines that don't have to be followed all the time. This disagrees with your own views on what best practices are [1].

Perhaps it was just a badly phrased submission title, but it set the tone and direction of the discussion. The title effectively told people they are doing CSS wrong. People don't like to be wrong, and will go to great lengths to prove themselves right [2]. It's nothing personal and I bet if the title was less preachy, it would have gathered more productive comments and had a friendly tone.

In general your articles are high quality and the advice sound. I think this issue was caused solely by a bad title. Though I still don't understand why you hate IDs so much!

[1] http://csswizardry.com/2011/12/on-html-and-css-best-practices/

[2] http://xkcd.com/386/

Seems like what you're describing here is BEM (Block/Element/Modifier) - those interested can read more about it here:

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Basically it's anti-nesting and proposes being very specific with regards to class naming:

.block{}
.block__element{}
.block--modifier{}

I've experimented a bit with this lately but haven't come to a conclusion yet myself. Yes, it does decrease the chances of accidently styling the wrong elements, but it also makes the html more verbose and can in some cases make it more difficult to implement the website w/jQuery (because of the different classes in use, ie. instead of a .selected class you might have .selected__orange, .selected__apple so to switch the selected item you can't just do an .removeClass('selected')/.addClass('selected)

I like the Learn Enough tutorials and recommend them particularly for newcomers that like to find an introduction and overview to a topic. In this case the HTML and CSS / layout courses should be relevant:

- HTML: https://www.learnenough.com/html-tutorial

- CSS & Layout: https://www.learnenough.com/css-and-layout-tutorial

However the CSS tutorial doesn't include CSS Grid yet, which is pretty much essential these days and therefor requires further reading elsewhere. CSS Grid is a major milestone for layout on the web. Don't miss it.

Additionally another important aspect that is often overlooked: Naming things in CSS. Since you're working with a global namespace it's important to find a sane naming system. I recommend BEM, which is easy to grasp: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/