Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

OOCSS + Sass = The best way to CSS

ianstormtaylor.com

Post reply on HN
Print view View original

31–40 of 57 posts

Re: OOCSS + Sass = The best way to CSS

#31

Post by Bockit »

In an ideal world, I'd like to be able to use the CSS framework of my choice e.g. bootstrap, semantic markup for the reasons the author described in the article, and, the ability to extend my semantic classes with the .span2, .container, etc. classes from the framework.

I actually thought about doing it this way by just importing the bootstrap CSS and extending from the various parts, but I realised elements inside the element I'm going to extend from container won't have the container parent class and thus won't get the correct CSS applied.

Does anyone know of something that solves this?

Re: OOCSS + Sass = The best way to CSS

#32

Post by akdetrick »

You can either repeat yourself by using "@extend %mypattern" in Sass using this methodology, or repeat yourself in the DOM with ".mypattern" in the OOCSS approach.

Both are elegant ways of handling the same task, but I don't think one is much more DRY than the other.

I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it to each element individually (Sass @extend).

Re: OOCSS + Sass = The best way to CSS

#34

Post by ianstormtaylor »

necolas wrote: post #24

I haven't had the experience that HTML is harder to maintain if you use classes more liberally. What this approaches forces you to do is: write or edit CSS every time you want a new combination of existing traits...which isn't ideal either. The post also suggests that certain class names are "unsemantic", when they obviously aren't. They just have different meaning to the sorts of class names the author is advocating…

Right, I addressed that in the post. They are "non-semantic" as far as people normally apply the word "semantic" to HTML. You might say that they are still semantic, fine. But you'd be hard pressed to argue that they are different than classes like `.dropdown` or `.menu`, and that difference makes them _much_ more susceptible to change. Which means if you're littering your markup with those classes, you will have to sync those changes all over the place.

Yes there are still changes to make (there always will be), but with the OOSass approach you're doing it in a single place. Want all of your statuses to be `.media` modules? One place. Not n places. Moving the work from the n-side to the 1-side is the mark of a good abstraction.

Re: OOCSS + Sass = The best way to CSS

#35

Post by jenius »

Bockit wrote: post #31

In an ideal world, I'd like to be able to use the CSS framework of my choice e.g. bootstrap, semantic markup for the reasons the author described in the article, and, the ability to extend my semantic classes with the .span2, .container, etc. classes from the framework. I actually thought about doing it this way by just importing the bootstrap CSS and extending from the various parts, but I realised elements inside t…

I thought this exact same thing a few months and have been building a framework that works exactly this way. I've spoken about it at a number of small meetups and events.

I haven't released it to the public yet, and it's currently getting a rewrite and bump to v2, but if you'd like to check it out i can send it over.

Re: OOCSS + Sass = The best way to CSS

#36

Post by jenius »

akdetrick wrote: post #32

You can either repeat yourself by using "@extend %mypattern" in Sass using this methodology, or repeat yourself in the DOM with ".mypattern" in the OOCSS approach. Both are elegant ways of handling the same task, but I don't think one is much more DRY than the other. I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it t…

If you are looking for more power, you can use mixins rather than extends. This way, you do get an additional and very signficant power boost - what previously were utility classes are now functions, which take parameters and have the ability to adapt and flex if you write them correctly.

Re: OOCSS + Sass = The best way to CSS

#37

Post by ianstormtaylor »

akdetrick wrote: post #32

You can either repeat yourself by using "@extend %mypattern" in Sass using this methodology, or repeat yourself in the DOM with ".mypattern" in the OOCSS approach. Both are elegant ways of handling the same task, but I don't think one is much more DRY than the other. I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it t…

"I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it to each element individually (Sass @extend)."

What makes you say that the Sass approach is describing it "many times over"? It's described in one place: the %placeholder declaration. There are three steps in the process:

+ Describe the pattern. + Apply the pattern to components. + Apply the components to elements.

In OOCSS, you:

+ Describe the pattern once. + Apply the pattern n times per component. + Apply the component n times per element.

In OOSass, you:

+ Describe the pattern once. + Apply the pattern once per component. + Apply the component n times per element.

The OOSass is much DRYer because if you've decided already that all .dropdown-menu-item's are going to be `.media` patterns, you do that once. You don't have to keep repeating that decision every time you write a new dropdown.

Re: OOCSS + Sass = The best way to CSS

#38

Post by ianstormtaylor »

jenius wrote: post #33

I wrote a very very similar article many months ago (but no upvotes * sob *) - perhaps people interested in this article would also be interested in my take on it, where I rely much more on mixins than extends: http://carrotblog.com/css-patterns-evolved/

OP here, nice article! As long as you always group your selectors, mixins would do exactly the same thing as I'm describing. What's awesome about Sass @extend though is that you can ungroup your `.post, .comment, .friend ` selectors and Sass will regroup them for you! If you did that with mixins you'd end up with code duplication. Cheers!

Re: OOCSS + Sass = The best way to CSS

#39

Post by lowboy »

jenius wrote: post #36
akdetrick wrote: post #32

You can either repeat yourself by using "@extend %mypattern" in Sass using this methodology, or repeat yourself in the DOM with ".mypattern" in the OOCSS approach. Both are elegant ways of handling the same task, but I don't think one is much more DRY than the other. I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it t…

If you are looking for more power, you can use mixins rather than extends. This way, you do get an additional and very signficant power boost - what previously were utility classes are now functions, which take parameters and have the ability to adapt and flex if you write them correctly.

Yup, I've been using mixins for a while now to reduce code bloat. It seems like placeholders are degenerate forms of mixins.

edit After more reading, they are most definitely not degenerate forms of mixins. Placeholders FTW!

Re: OOCSS + Sass = The best way to CSS

#40

Post by jenius »

ianstormtaylor wrote: post #38
jenius wrote: post #33

I wrote a very very similar article many months ago (but no upvotes * sob *) - perhaps people interested in this article would also be interested in my take on it, where I rely much more on mixins than extends: http://carrotblog.com/css-patterns-evolved/

OP here, nice article! As long as you always group your selectors, mixins would do exactly the same thing as I'm describing. What's awesome about Sass @extend though is that you can ungroup your `.post, .comment, .friend ` selectors and Sass will regroup them for you! If you did that with mixins you'd end up with code duplication. Cheers!

Thanks! And definitely agreed - I never used @extends too much previously, but I'm starting to see some use cases for it. The placeholder class is an especially nice new feature outlined here, also props to Chris Eppstein for his awesome work on this.
Post reply on HN