Sass style guides doubts

Design
1

@kylefiedler I have doubts in the reasoning behind this rules:

  • Use HTML tags on vague classes that need a qualifier like header.application not .main.
  • Avoid using HTML tags on classes for generic markup <div>, <span>: .widgets not div.widgets.

Aren’t these contradictory?

  • Avoid using comma delimited selectors.

Why this rule?

Thanks.

2

So yes and no. The thinking here is a balance to be had between Sass readability and simplicity/speed of the generated CSS. My general rule is not to apply the qualifier for <section> and non-semantic tags like the aforementioned <div> and <span>. That way I know that classes without a qualifier are just a general container. For things like <header>, <ol>, <ul>, <h1> I add the qualifier so that my Sass ends up reading much like a Haml document would.

It also depends heavily on the class name. I don’t like repeating html tags in class names. I feel it’s repetitive. So I could have a header.application, footer.application, ul.menu over something like .application-header, .application-footer and .menu-list.

These rules intentionally leave a lot up to the designer that is building out that Sass because not all designers agree with me on that formatting.

For me, it’s a code smell that something should be an extend or mixin. I’ve also found that it can make nesting in sass much harder to read. Sometimes it doe make the most sense in which case I do it.

That clear those up?

3

@kylefiedler Yes. Thank you very much.