11–20 of 96 posts
Looks great. However, I've never really understood this sort of approach: Alvin Alvin Alvin Alvin Rather than assigning a "collection-item" class to each "li", would you not simply style the "li" in the context of "collection"? Bootstrap does a similar thing. Drives me nuts...
Earlier quoted context omitted.
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 mom…
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 v…
...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.
Earlier quoted context omitted.
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 v…
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. Doe…
Earlier quoted context omitted.
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 mom…
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 v…
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 :
.collection > li { color: red; }
.collection-link { color: blue; } // this will not work
.collection > li .collection-link { color: blue; } // increased complexity
Bootstrap material design has something similar, although it is not matured yet: https://github.com/FezVrasta/bootstrap-material-design
It's effectively CC BY-SA-NC which is rather bold when you consider that it's adopting a design framework from Google for a css framework from Twitter.
[0] https://github.com/FezVrasta/bootstrap-material-design/blob/...
[1] https://github.com/FezVrasta/bootstrap-material-design/searc...
Earlier quoted context omitted.
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 v…
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 : .collection > li { color: red; } and later on yo…
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.
This looks really good, but the jQuery dependency makes it unfortunately less interesting. It should be possible to have the jQuery dependency optional, possibly only for legacy browser support.
Earlier quoted context omitted.
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 : .collection > li { color: red; } and later on yo…
>> 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.
[1] http://www.smashingmagazine.com/2011/12/12/an-introduction-t... [2] http://bramsmulders.com/how-i-improved-my-workflow-with-smac... [3] 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 :
Normal Text
Looks great. However, I've never really understood this sort of approach: Alvin Alvin Alvin Alvin Rather than assigning a "collection-item" class to each "li", would you not simply style the "li" in the context of "collection"? Bootstrap does a similar thing. Drives me nuts...
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 mom…