8 ms·

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: "col

by bbx 11y 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 11y 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 11y 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 11y 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 11y 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.
  - rezistik 11y ago
    Mozilla disagrees. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi... They explicitly state using css classes is more performant than using tags. I'd be interested in a CSSPerf(Do they have those?)
    - calaveraDeluxe 11y ago
      As others have pointed out, that article is now 15 years old.
zachalexander 11y ago
> CSS best practices ...don't exist. There are many competing schools of thought. In particular, BEM is a school of thought with widespread support which disagrees with your comment.
drinchev 11y ago
I don't agree with this. Do you have some references about your statement. I think the whole community went to separating the HTML tag names from the styles and work only with class names [1]. If you start styling your tags directly it imminently increase the code debt if you scale. Let's say you just want to add another element inside the tag. I can give you example : <ul class='collection'><li></li></ul> .collection > li { color: red; } and later on you add a anchor as a child you would need to force the specificy to this element <ul class='collection'><li><a class='collection-link'></a></li></ul> .collection-link { color: blue; } // this will not work .collection > li .collection-link { color: blue; } // increased complexity I would almost always advice against styling tag names, except when you are doing css reset. 1: https://en.bem.info/articles/side-effects-in-css/ https://en.bem.info/articles/side-effects-in-css/
- ddoolin 11y ago
  >> I think the whole community went to separating the HTML tag names from the styles and work only with class names [1]. I don't usually nitpick but I don't think one link is representative of the `whole community`. Just this thread seems to prove it's pretty divided on the issue. What is the recommendation, then? .collection .collection-item .collection-item-anchor? Genuinely curious here.
  - drinchev 11y ago
    References : [1] http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/ http://www.smashingmagazine.com/2011/12/12/an-introduction-t... [2] http://bramsmulders.com/how-i-improved-my-workflow-with-smacss-sass.html http://bramsmulders.com/how-i-improved-my-workflow-with-smac... [3] https://github.com/davidtheclark/scalable-css-reading-list https://github.com/davidtheclark/scalable-css-reading-list I don't usually reply in this way, but this way of writing CSS has been proven to me in many hard to predict situations and is something that I would fight for in every possible way, everywhere I can. :D I've been part of large projects that if you don't follow some styleguide rules you end up with "!important" in your codebase. Which is bad. Scalable CSS writing ( even more important for a CSS framework that you use as a base ) consists of a more modular approach to your stylesheet. Let's say you have a list I would usually do it : <ul class='collection'> <li class='collection-item'> <a class='button button--primary'></a> </li> <li class='collection-item'>Normal Text</li> </ul> By doing this I can safely remove the .button, code ( module ) and put it somewhere else on my page without affecting how it will look like. Something more if I feel that I have a totally different link in this exact place, well yes. I would call it '.collection-item-link', because '.special-fancy-link' isn't semantic at all.
roughcoder 11y ago
Its bigger then li's it about an overall approach. In this use case, yes maybe its an overkill but in some cases its not and allows for quite a bit of flexibility to use the same styles across multiple element types. I guess it's come about from trying to be more semantic within the documents. Declaring Headings with classes is a good example as well. h1, .h1{ font-size:20px; } h2, .h2{ font-size:18px; } etc... This allows you to apply <h1> styles to <h3> or even <p>'s while still keeping the content semantically correct and designers happy. Another few other common ones are strong, .strong{ font-weight:600; } small, .small{ text-size:10px; } The same can go with .collection, somebody may want to use the styles on something thats not a list for example <div>'s. It also does not really go against inheritance, themes like .collection-alt can still work. Sometimes its an overkill and I don't always do it, but in some cases (heavily responsive sites) it has worked really well. Its also easier to work in a team with one approach, rather then just doing it for headings etc why not take the principle/standard across all styles.
- Geee 11y ago
  A more extreme example of this is http://www.basscss.com/ http://www.basscss.com/ where CSS classes are reusable and composable. E.g. a list could be: <ul class="list-reset"> <li class="inline-block mr1 h4 border border-red">Half-Smoke</li> <li class="inline-block mr1 h4 border border-green">Kielbasa</li> <li class="inline-block mr1 h4 border border-blue">Bologna</li> <li class="inline-block mr1 h4 border border-yellow">Prosciutto</li> </ul>
patsplat 11y ago
Your example would corrupt the following case: <ul class="collection"> <li class="collection-item"> <ul> <li>Bulleted label</li> <li>Bulleted label 2</li> </ul> </li> </ul> This case must be considered when setting coding standards for a framework.
- brlewis 11y ago
  Was this sentence not there when you first replied? You want nested li's to not inherit the styles? Use ".collection > li" in your CSS.
  - patsplat 11y ago
    oh my. missed the > when first replied. Note that ie6 did not support that selector. Until recently that certainly was a case for the frameworks to support.
Kiro 11y ago
No, you are completely wrong. Assigning a class on each li is indeed best practice. You should never select an element on tag.
rezistik 11y ago
There are performance considerations as well. Using selectors is more performant than raw tags. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi... Using nesting and tags is less performant than classes. So using more classes is better than less.
- spankalee 11y ago
  That article is old > Note: This document was originally written in 2000. Much has changed when it comes to writing CSS that is fast.
  - rezistik 11y ago
    Oh...woops. Do you know of any more recent articles? I've been playing by this since I bombed an interview where they asked about CSS performance a few months ago and I had nothing smart to say.

by bbx 11y ago

dovel 11y 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 11y 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 11y 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 11y 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.
- rezistik 11y ago
  Mozilla disagrees. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi... They explicitly state using css classes is more performant than using tags. I'd be interested in a CSSPerf(Do they have those?)
  - calaveraDeluxe 11y ago
    As others have pointed out, that article is now 15 years old.

zachalexander 11y ago

> CSS best practices ...don't exist. There are many competing schools of thought. In particular, BEM is a school of thought with widespread support which disagrees with your comment.

drinchev 11y ago

I don't agree with this. Do you have some references about your statement. I think the whole community went to separating the HTML tag names from the styles and work only with class names [1]. If you start styling your tags directly it imminently increase the code debt if you scale. Let's say you just want to add another element inside the tag. I can give you example : <ul class='collection'><li></li></ul> .collection > li { color: red; } and later on you add a anchor as a child you would need to force the specificy to this element <ul class='collection'><li><a class='collection-link'></a></li></ul> .collection-link { color: blue; } // this will not work .collection > li .collection-link { color: blue; } // increased complexity I would almost always advice against styling tag names, except when you are doing css reset. 1: https://en.bem.info/articles/side-effects-in-css/ https://en.bem.info/articles/side-effects-in-css/

ddoolin 11y ago
>> I think the whole community went to separating the HTML tag names from the styles and work only with class names [1]. I don't usually nitpick but I don't think one link is representative of the `whole community`. Just this thread seems to prove it's pretty divided on the issue. What is the recommendation, then? .collection .collection-item .collection-item-anchor? Genuinely curious here.
- drinchev 11y ago
  References : [1] http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/ http://www.smashingmagazine.com/2011/12/12/an-introduction-t... [2] http://bramsmulders.com/how-i-improved-my-workflow-with-smacss-sass.html http://bramsmulders.com/how-i-improved-my-workflow-with-smac... [3] https://github.com/davidtheclark/scalable-css-reading-list https://github.com/davidtheclark/scalable-css-reading-list I don't usually reply in this way, but this way of writing CSS has been proven to me in many hard to predict situations and is something that I would fight for in every possible way, everywhere I can. :D I've been part of large projects that if you don't follow some styleguide rules you end up with "!important" in your codebase. Which is bad. Scalable CSS writing ( even more important for a CSS framework that you use as a base ) consists of a more modular approach to your stylesheet. Let's say you have a list I would usually do it : <ul class='collection'> <li class='collection-item'> <a class='button button--primary'></a> </li> <li class='collection-item'>Normal Text</li> </ul> By doing this I can safely remove the .button, code ( module ) and put it somewhere else on my page without affecting how it will look like. Something more if I feel that I have a totally different link in this exact place, well yes. I would call it '.collection-item-link', because '.special-fancy-link' isn't semantic at all.

roughcoder 11y ago

Its bigger then li's it about an overall approach. In this use case, yes maybe its an overkill but in some cases its not and allows for quite a bit of flexibility to use the same styles across multiple element types. I guess it's come about from trying to be more semantic within the documents. Declaring Headings with classes is a good example as well. h1, .h1{ font-size:20px; } h2, .h2{ font-size:18px; } etc... This allows you to apply <h1> styles to <h3> or even <p>'s while still keeping the content semantically correct and designers happy. Another few other common ones are strong, .strong{ font-weight:600; } small, .small{ text-size:10px; } The same can go with .collection, somebody may want to use the styles on something thats not a list for example <div>'s. It also does not really go against inheritance, themes like .collection-alt can still work. Sometimes its an overkill and I don't always do it, but in some cases (heavily responsive sites) it has worked really well. Its also easier to work in a team with one approach, rather then just doing it for headings etc why not take the principle/standard across all styles.

Geee 11y ago
A more extreme example of this is http://www.basscss.com/ http://www.basscss.com/ where CSS classes are reusable and composable. E.g. a list could be: <ul class="list-reset"> <li class="inline-block mr1 h4 border border-red">Half-Smoke</li> <li class="inline-block mr1 h4 border border-green">Kielbasa</li> <li class="inline-block mr1 h4 border border-blue">Bologna</li> <li class="inline-block mr1 h4 border border-yellow">Prosciutto</li> </ul>

patsplat 11y ago

Your example would corrupt the following case: <ul class="collection"> <li class="collection-item"> <ul> <li>Bulleted label</li> <li>Bulleted label 2</li> </ul> </li> </ul> This case must be considered when setting coding standards for a framework.

brlewis 11y ago
Was this sentence not there when you first replied? You want nested li's to not inherit the styles? Use ".collection > li" in your CSS.
- patsplat 11y ago
  oh my. missed the > when first replied. Note that ie6 did not support that selector. Until recently that certainly was a case for the frameworks to support.

Kiro 11y ago

No, you are completely wrong. Assigning a class on each li is indeed best practice. You should never select an element on tag.

rezistik 11y ago

There are performance considerations as well. Using selectors is more performant than raw tags. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi... Using nesting and tags is less performant than classes. So using more classes is better than less.

spankalee 11y ago
That article is old > Note: This document was originally written in 2000. Much has changed when it comes to writing CSS that is fast.
- rezistik 11y ago
  Oh...woops. Do you know of any more recent articles? I've been playing by this since I bombed an interview where they asked about CSS performance a few months ago and I had nothing smart to say.