search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

Extend #6

Closed wheresrhys closed 10 years ago

wheresrhys commented 10 years ago

There's lots of use of @extend. I've seen a number of people advise against using it because it can lead to this: https://twitter.com/mezzoblue/status/390274599167877120. Are you confident we're OK on this front? @triblondon

wheresrhys commented 10 years ago

The example you posted (and I've had to work with stuff like that myself so understand the pain it causes) is arguably misuse of the tools, and can only really happen if deep nesting is combined with @extend. I'm not a big fan of @extend though and only included it the last minute as a way for people to retrofit the grid to existing pages and components without touching the templates. I'm in favour of including a statement discouraging the use, but do however think rules like 

img:not(.primary) { 
  @extend %ft-grid-small-hide 
}

can be very handy and don't lead to css bloat. Perhaps:

In general use ft-grid-col-... classes and only use @extend for cases where significant simplification of code is achieved or editing the templates is not possible. Be very careful your css does not become bloated as a result

The other use of @extend - for gutterless columns - is I think essential as including gutter specifications in the classes (4 layout sizes + default, LHS & RHS) would undoubtedly have a negative impact on readability

triblondon commented 10 years ago

OK, happy with that. Just wanted to make sure it had been considered.