6 ms·

A lot of styles are being applied without you having to set a class. For example, all tables are styled. This can get in the way really fast if you want to do y

A lot of styles are being applied without you having to set a class. For example, all tables are styled. This can get in the way really fast if you want to do your own styles for a element.

noway421 9y ago
Good point. Styling h1-h6 is good alongside the typography look and feel, but styling <table> without a class is misguided.
claviska 9y ago
Someone else asked this so figured I'd share my response: https://github.com/claviska/shoelace-css/issues/12#issuecomment-319352472 https://github.com/claviska/shoelace-css/issues/12#issuecomm...
- jessaustin 9y ago
  I think you're exactly right about this. The <tag class="tag"> idiom has always annoyed me.
- SippinLean 9y ago
  >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.
ohitsdom 9y ago
Agreed. Most of the time, it's great and leads for a cleaner DOM. But it could cause issues. A workaround I use in my own styles is doing something like class="plain", then the table rule would be table:not(.plain).
- appleflaxen 9y ago
  that's a great trick! thanks for pointing it out.
yellowapple 9y ago
Personally, if I have to slap a bunch of classes on everything, then something is seriously wrong. HTML should be declarative, and it should be declarative of the content, not necessarily the presentation. Classes should therefore describe what something is, not how it's supposed to be presented. It's CSS' job to describe how it's supposed to be presented. For that reason, I'll generally choose a <table>...</table> with a default style over having to do <table class="shoelaces-table">...</table> every time. If you really do want to completely override the table style, it looks like it's just a matter of removing the respective line in https://github.com/claviska/shoelace-css/blob/master/dist/shoelace.css https://github.com/claviska/shoelace-css/blob/master/dist/sh... and rebuilding. Also, most modern browsers have a "developer" mode that shows exactly what CSS rules come from where. If the provided style really is getting in the way, it should be (relatively) easy to figure out what specifically is getting in the way (and then addressing it in your own CSS) instead of just blowing away the whole table style and starting from scratch. Looking at https://github.com/claviska/shoelace-css/blob/master/source/css/tables.css https://github.com/claviska/shoelace-css/blob/master/source/..., it doesn't look like it's doing all that much that'd be likely to conflict with anything in a way that would absolutely necessitate starting from scratch.
- SippinLean 9y ago
  >Classes should therefore describe what something is, not how it's supposed to be presented. That's what we used to think when Semantic CSS was the big buzzword, lots of articles from '08-'11 preached it as the gospel. Turns out when a language is based on customizing presentation, presentation is semantic. > I had a number of locations that I highlighted with a blue background and rounded corners. I called it `location` since it highlighted each of the locations > When I opened the online store, I had a list of products and wanted to highlight each product using the same design pattern. Problem was, they weren’t locations. They were products. Being the lazy developer I was, though, I just reused the `location` class and applied it to my products. Clearly not ideal (but hey, it worked)! > The design function was, of course, to highlight something. That was what I should’ve called it! https://snook.ca/archives/html_and_css/semantic-css https://snook.ca/archives/html_and_css/semantic-css

A lot of styles are being applied without you having to set a class. For example, all tables are styled. This can get in the way really fast if you want to do your own styles for a element.

noway421 9y ago

Good point. Styling h1-h6 is good alongside the typography look and feel, but styling <table> without a class is misguided.

claviska 9y ago

Someone else asked this so figured I'd share my response: https://github.com/claviska/shoelace-css/issues/12#issuecomment-319352472 https://github.com/claviska/shoelace-css/issues/12#issuecomm...

jessaustin 9y ago
I think you're exactly right about this. The <tag class="tag"> idiom has always annoyed me.
SippinLean 9y ago
>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.

ohitsdom 9y ago

Agreed. Most of the time, it's great and leads for a cleaner DOM. But it could cause issues. A workaround I use in my own styles is doing something like class="plain", then the table rule would be table:not(.plain).

appleflaxen 9y ago
that's a great trick! thanks for pointing it out.

yellowapple 9y ago

Personally, if I have to slap a bunch of classes on everything, then something is seriously wrong. HTML should be declarative, and it should be declarative of the content, not necessarily the presentation. Classes should therefore describe what something is, not how it's supposed to be presented. It's CSS' job to describe how it's supposed to be presented. For that reason, I'll generally choose a <table>...</table> with a default style over having to do <table class="shoelaces-table">...</table> every time. If you really do want to completely override the table style, it looks like it's just a matter of removing the respective line in https://github.com/claviska/shoelace-css/blob/master/dist/shoelace.css https://github.com/claviska/shoelace-css/blob/master/dist/sh... and rebuilding. Also, most modern browsers have a "developer" mode that shows exactly what CSS rules come from where. If the provided style really is getting in the way, it should be (relatively) easy to figure out what specifically is getting in the way (and then addressing it in your own CSS) instead of just blowing away the whole table style and starting from scratch. Looking at https://github.com/claviska/shoelace-css/blob/master/source/css/tables.css https://github.com/claviska/shoelace-css/blob/master/source/..., it doesn't look like it's doing all that much that'd be likely to conflict with anything in a way that would absolutely necessitate starting from scratch.

SippinLean 9y ago
>Classes should therefore describe what something is, not how it's supposed to be presented. That's what we used to think when Semantic CSS was the big buzzword, lots of articles from '08-'11 preached it as the gospel. Turns out when a language is based on customizing presentation, presentation is semantic. > I had a number of locations that I highlighted with a blue background and rounded corners. I called it `location` since it highlighted each of the locations > When I opened the online store, I had a list of products and wanted to highlight each product using the same design pattern. Problem was, they weren’t locations. They were products. Being the lazy developer I was, though, I just reused the `location` class and applied it to my products. Clearly not ideal (but hey, it worked)! > The design function was, of course, to highlight something. That was what I should’ve called it! https://snook.ca/archives/html_and_css/semantic-css https://snook.ca/archives/html_and_css/semantic-css