Broad style rules in structure.scss can cause conflicts

[jelbourn]

The very broad rules in structure.scss (example below) can cause issues when used alongside another component library. We should explore ways to apply these styles more selectively.

*,
*:before,
*:after {
  box-sizing: border-box;
}

[marcysutton]

That is good feedback. But if we don't provide defaults, then you'd ALWAYS have to provide a CSS class for headings, which would be a pain. Do you really need !important if your font size comes after that definition?

[PrashantAshok]

Thanks. Yes I don't need !important - didn't realize my files were being loaded before material files.

[btw, sorry i accidentally deleted my comment, re-posting here again]
aren't the default h tags still too broad?

h1 {
  @extend .md-display-1;
  font-weight: 400;
  margin: $h1-margin-base;
}

[marcysutton]

@PrashantAshok wouldn't you already have to override the browser's default font size anyway? I am definitely thinking hard on whether the styles are in fact too broad, but I want to consider all angles. Libraries like Bootstrap do define default font sizes for headings. I think as long as they are easy to override, that is the key.

[PrashantAshok]

Yep. Libraries like bootstrap are easy to override, but I am thinking maybe material leaves it to bootstrap/others to define defaults and just has material specific styles?

[marcysutton]

Great feedback from @jelbourn:

If you just want to use the datepicker, you shouldn't have to change the style of your <h1> tags, etc.

Based on that and your concerns @PrashantAshok, I'm thinking the base h tags should cascade off of a CSS class on the body or other parent element. Would that help?

[PrashantAshok]

I think that should work, something like .md-body {}?

[marcysutton]

(Edited) A body class is not a good idea, as it turns out. We are investigating solutions for this, so stay tuned.

[marcysutton]

@PrashantAshok have a look at #2042, it should sort everything out.

[PrashantAshok]

Looks great @marcysutton . Thanks.