News for hackers. Stuff that matters.
Re:Shoelace.css – A back to the basics CSS starter kit by claviska on Tuesday August 01, 2017 @08:13AM (#14899830)
Someone else asked this so figured I'd share my response: https://github.com/claviska/shoelace-css/issues/12#issuecomm...
Re:Shoelace.css – A back to the basics CSS starter kit by SippinLean on Tuesday August 01, 2017 @10:21AM (#14900884)
>I've never used a <table> without <table class="table">. It's redundant.

It's not redundant, an element selector has a different specificity than a class selector. Much easier to maintain when Everything Is A Class (especially when paired with BEM, for very flat selectors). It's the reason Bootstrap stopped doing this.

Who cares if it's redundant? Classes are cheap and repeated strings cost you almost nothing after Gzip.

Re:Shoelace.css – A back to the basics CSS starter kit by claviska on Tuesday August 01, 2017 @11:13AM (#14901507)
So should we use <h1 class="h1"> and <a class="a">? It's redundant. Shoelace provides a reset + minimal, default, and customizable styles. You can use variables and also modifiers to change those styles. It's not Bootstrap. Different paradigm.
Re:Shoelace.css – A back to the basics CSS starter kit by SippinLean on Tuesday August 01, 2017 @11:37AM (#14901832)
Yes! First I should point out that "reset"-style element selectors are usually ok. But for component CSS classes are king. It's why BS4 styles naked <table> tags with reset styles, but offers the .table class as an option if you want the look and feel of their Table component.

BS has actually has an .h1 class. Eventually a design calls for an <h2> that needs to have the visual appearance of an h1 but for SEO or HTML semantics reasons needs to be an h2.

Maintaining any site of a certain size it spirals into a nightmare quite quickly. Look at how Bootstrap 4 can add a dropdown to a <div> or a <nav>. If your rule was just `nav {}` you wouldn't have that portability, `.dropdown` is clearly superior. On sites of scale modular CSS wins every time.

>It's not Bootstrap. Different paradigm.

Could have fooled me as a lot of the class names and styling are identical. If the m-* and p-* spacing utilities are identical, is it really a different paradigm? BS has (Sass) variables as well.

Re:Shoelace.css – A back to the basics CSS starter kit by claviska on Tuesday August 01, 2017 @12:01PM (#14902134)
This is certainly true for components, and Shoelace does style components this way (look at switches and tabs, for example). But for basic elements (non-components) IMO a clean reset is reasonable to expect.
Re:Shoelace.css – A back to the basics CSS starter kit by SippinLean on Tuesday August 01, 2017 @12:06PM (#14902202)
Agreed, it's inconsistent. What if I want a <table> without borders?

Should I expect an <a> with `.text-success` to overwrite `.tab-group a`? Or do I need a new class for `.tab-group .text-success`?

Look at how BS4 broke up Navs from being `.navbar > li > a` to being .navbar, .navbar-item and .navbar-link and think about why they did.

Re:Shoelace.css – A back to the basics CSS starter kit by claviska on Tuesday August 01, 2017 @02:10PM (#14903599)
Definitely some good arguments. Nothing is perfect, of course, and I'm always open to feedback like this.

In the meantime, a borderless table could be a modifier: table-borderless (i.e. like table-striped or table-bordered).

Just a different approach than what a lot of folks are used to :)

Re:Shoelace.css – A back to the basics CSS starter kit by shincert on Tuesday August 01, 2017 @10:28AM (#14900957)
How is it much easier to maintain?
Re:Shoelace.css – A back to the basics CSS starter kit by SippinLean on Tuesday August 01, 2017 @10:37AM (#14901054)
Because when everything is a class (even better, every selector is a single class like BEM strives for) overwriting rules is much easier because they all have the same specificity.

When you mix element selectors with class, ID, and multi-class (.foo.bar) selectors the specificity of each is different, and overwriting them means writing needlessly complicated selectors that are then in turn harder to maintain.

Bootstrap 4 goes as far as eliminating most sibling/child combinators (>, +, etc) because they add specificity. Anyone that's tried to write custom classes for list elements in Bootstrap 3 (.list-inline>li) has experienced this.

http://v4-alpha.getbootstrap.com/migration/#navs

Re:Shoelace.css – A back to the basics CSS starter kit by jessaustin on Tuesday August 01, 2017 @08:57AM (#14900146)
I think you're exactly right about this. The <tag class="tag"> idiom has always annoyed me.