FundingCircle / sass-common

Common Sass mixins and files
BSD 3-Clause "New" or "Revised" License
14 stars 5 forks source link

Fix all @extends #77

Open RazvanDH opened 9 years ago

RazvanDH commented 9 years ago

Some @extends are a bit vague and generate bad CSS that is hard to control. We should only placeholders and placeholder structures and not classes.

Reason:

.btn { ... }
.btn--large { @extend .btn; }
...
.funky-element .btn { ... }

will output:

.btn, 
.btn--large { 
  ... 
}
.funky-element .btn,
.funky-element .btn--large {
  ...
}
RazvanDH commented 9 years ago

ping @FundingCircle/frontend - to keep in mind when using the @extend

igoratron commented 9 years ago

As a SASS/CSS layman I'd like to have a graph that tracks the size of the CSS over time. If it suddenly explodes it would be easier to notice

RazvanDH commented 9 years ago

@igoratron - you should always check the result of your CSS after you compile Sass. One does not simply write Sass without checking the result, either through a graph or manually.

igoratron commented 9 years ago

Agreed, however at the moment it's not really easy. Or even enforced. Having a graph/test on CI to check if we're not braking this rule would make it easier for me. It might be just me thought -- I think we should graph a lot more :)