7 ms·

It's so you don't clobber the underlying styles, otherwise you end up having to reset on top of the frameworks resets and styles on the odd occasion you want on

by weego 12y ago

It's so you don't clobber the underlying styles, otherwise you end up having to reset on top of the frameworks resets and styles on the odd occasion you want one of the collection li's to not have the styles. I tend to agree with you, but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice at the moment (until the cycle comes around again to another best practice).

pan69 12y ago
>> but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice I'd say, keep it DRY [1]. http://en.wikipedia.org/wiki/Don't_repeat_yourself http://en.wikipedia.org/wiki/Don't_repeat_yourself
- ahallock 12y ago
  It doesn't violate DRY. The repetition of "collection" is indicating a descendent component: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...
  - BinaryIdiot 12y ago
    HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.
    - ahallock 12y ago
      LIs are generic containers--the only way to narrowly scope LIs is to use hierarchical selectors, which leads location dependency and specificity issues. The class name creates a scope and you need to apply that to decedent components to enforce the scope. It's DRY within the naming convention, which doesn't mix element selectors with class selectors (or at least rarely).
      - BinaryIdiot 12y ago
        > LIs are generic containers LIs are actually kinda special. It's incredibly difficult to create your own LI in, say, web components because of their specialness (at least I've never seen it work in all browsers though there are probably some crazy hacks to get it there (or at least close enough)). > which leads location dependency and specificity issues You have a list of a specific type so you put a class on it. Why would that specific type of list now contain items that can be used in multiple places versus in that specific list and why would they ever be moved from that specific type of list? I don't really understand the issue you're trying to convey.
bbx 12y ago
Tell your lead front dev this approach isn't best practice at all. You want one collection li's to not have the style? Use an alternative class on the ul: "collection collection-alt". You want nested li's to not inherit the styles? Use ".collection > li" in your CSS. In any case, assigning a class on each li goes exactly against CSS best practices, because it prevents taking advantage of the inheritance of property values or of advanced selectors.
- dovel 12y ago
  I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Does anyone know more about this?
  - ddoolin 12y ago
    This is true, actually. They are read from right-to-left. I'm not sure how much extra resources are expended searching this way opposed to the other, though my guess would be the same as yours. It may be worth a benchmark?
  - anton-107 12y ago
    It used to be the issue in the "old browsers", modern browsers optimize the css query selectors to a very high extent, so users probably won't see a difference on any real web page / app
  - vbezhenar 12y ago
    Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.
moron4hire 12y ago
I've come to expect people who criticize others using "best practice" as their "source" are themselves not very good at what they do and are just cargo-culting ideas without any real understanding in underlying principles.

by weego 12y ago

pan69 12y ago

>> but I was heavily chastised by lead the front end dev at my last gig for ever directly applying design styles to tag entities as doing it as above is considered best practice I'd say, keep it DRY [1]. http://en.wikipedia.org/wiki/Don't_repeat_yourself http://en.wikipedia.org/wiki/Don't_repeat_yourself

ahallock 12y ago
It doesn't violate DRY. The repetition of "collection" is indicating a descendent component: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md https://github.com/suitcss/suit/blob/master/doc/naming-conve...
- BinaryIdiot 12y ago
  HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.
  - ahallock 12y ago
    LIs are generic containers--the only way to narrowly scope LIs is to use hierarchical selectors, which leads location dependency and specificity issues. The class name creates a scope and you need to apply that to decedent components to enforce the scope. It's DRY within the naming convention, which doesn't mix element selectors with class selectors (or at least rarely).
    - BinaryIdiot 12y ago
      > LIs are generic containers LIs are actually kinda special. It's incredibly difficult to create your own LI in, say, web components because of their specialness (at least I've never seen it work in all browsers though there are probably some crazy hacks to get it there (or at least close enough)). > which leads location dependency and specificity issues You have a list of a specific type so you put a class on it. Why would that specific type of list now contain items that can be used in multiple places versus in that specific list and why would they ever be moved from that specific type of list? I don't really understand the issue you're trying to convey.

bbx 12y ago

Tell your lead front dev this approach isn't best practice at all. You want one collection li's to not have the style? Use an alternative class on the ul: "collection collection-alt". You want nested li's to not inherit the styles? Use ".collection > li" in your CSS. In any case, assigning a class on each li goes exactly against CSS best practices, because it prevents taking advantage of the inheritance of property values or of advanced selectors.

dovel 12y ago
I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Does anyone know more about this?
- ddoolin 12y ago
  This is true, actually. They are read from right-to-left. I'm not sure how much extra resources are expended searching this way opposed to the other, though my guess would be the same as yours. It may be worth a benchmark?
- anton-107 12y ago
  It used to be the issue in the "old browsers", modern browsers optimize the css query selectors to a very high extent, so users probably won't see a difference on any real web page / app
- vbezhenar 12y ago
  Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.

moron4hire 12y ago

I've come to expect people who criticize others using "best practice" as their "source" are themselves not very good at what they do and are just cargo-culting ideas without any real understanding in underlying principles.