6 ms·

>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 sele

>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.

shincert 9y ago
How is it much easier to maintain?
- SippinLean 9y ago
  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 http://v4-alpha.getbootstrap.com/migration/#navs
claviska 9y ago
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.
- SippinLean 9y ago
  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.
  - claviska 9y ago
    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.
    - SippinLean 9y ago
      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.
      - claviska 9y ago
        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 :)

shincert 9y ago

How is it much easier to maintain?

SippinLean 9y ago
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 http://v4-alpha.getbootstrap.com/migration/#navs

claviska 9y ago

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.

SippinLean 9y ago
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.
- claviska 9y ago
  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.
  - SippinLean 9y ago
    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.
    - claviska 9y ago
      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 :)