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

11–20 of 57 posts

Re: OOCSS + Sass = The best way to CSS

#11

Post by pknight »

Torn wrote: post #7
pknight wrote: post #3

tl;dr Somebody discovered the power of mixins I don't see how SASS is doing something unique here that other preprocessors can't do as well.

Placeholder classes are new in SASS 3.2, so the blog post is explaining how to do them and what problem they solve. It's not unique, but it has been an awfully long time coming. See: https://github.com/nex3/sass/pull/236

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like

.media() { // won't compile directly width: 100%; // other cool styling }

img { .media; }

which would output just

img { width: 100%; }

Gives me similar results I think or am I missing something?

Re: OOCSS + Sass = The best way to CSS

#12

Post by abredow »

bookcasey wrote: post #8
pknight wrote: post #3

tl;dr Somebody discovered the power of mixins I don't see how SASS is doing something unique here that other preprocessors can't do as well.

The @extend directive, especially with placeholders, is very powerful and allows you to not repeat yourself in compiled CSS as well.

This is the key that I missed when I first read the article. Mixins will always be repeated when compiled. Placeholders result in combined selectors so the styles aren't repeated in the compiled CSS.

In many ways, it seems like placeholders would almost always be preferred to mixins. Though, I'm sure there are exceptions.

Re: OOCSS + Sass = The best way to CSS

#14

Post by ianstormtaylor »

pknight wrote: post #11
Torn wrote: post #7

Earlier quoted context omitted.

Placeholder classes are new in SASS 3.2, so the blog post is explaining how to do them and what problem they solve. It's not unique, but it has been an awfully long time coming. See: https://github.com/nex3/sass/pull/236

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a long time ago, but what happens when you apply that `.media` pattern to another selector? It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does.

And the point is even @extend can get bloaty when nested, but placeholder tags avoid that problem, and remove the extra pattern classes from the output.

So the article is actually advocating that you stop using mixins. Mixins aren't OOCSS, they're just copy and paste made easier.

Re: OOCSS + Sass = The best way to CSS

#15

Post by ville »

pknight wrote: post #11
Torn wrote: post #7

Earlier quoted context omitted.

Placeholder classes are new in SASS 3.2, so the blog post is explaining how to do them and what problem they solve. It's not unique, but it has been an awfully long time coming. See: https://github.com/nex3/sass/pull/236

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

This is what I was thinking as well. Apparently in SASS they only had mixins that work like classes and are included in the output and now the new "placeholders" act like .mixin () {} in LESS.

The example also combines hr {/* style /} .separator {/ style /} into one selector hr, .separator {/ style */}

but maybe that is something a CSS minifier should be able to do?

Re: OOCSS + Sass = The best way to CSS

#17

Post by grayrest »

pknight wrote: post #11
Torn wrote: post #7

Earlier quoted context omitted.

Placeholder classes are new in SASS 3.2, so the blog post is explaining how to do them and what problem they solve. It's not unique, but it has been an awfully long time coming. See: https://github.com/nex3/sass/pull/236

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

The effect is the same (it's composition vs inheritance) but the SASS CSS is going to be more space efficient. The way I think about it is that @extend copies the selector while mixins copy their contents.

Re: OOCSS + Sass = The best way to CSS

#18

Post by ianstormtaylor »

ville wrote: post #15
pknight wrote: post #11

Earlier quoted context omitted.

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

This is what I was thinking as well. Apparently in SASS they only had mixins that work like classes and are included in the output and now the new "placeholders" act like .mixin () {} in LESS. The example also combines hr {/* style /} .separator {/ style /} into one selector hr, .separator {/ style */} but maybe that is something a CSS minifier should be able to do?

No, SASS had @mixins and @extend. And now it has @extend with %placeholders, which is the least bloaty solution of them all. Lots of the use cases mixins are touted as solving are actually much better solved by @extend'ing %placeholders.

Re: OOCSS + Sass = The best way to CSS

#19

Post by pknight »

ianstormtaylor wrote: post #14
pknight wrote: post #11

Earlier quoted context omitted.

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a long time ago, but what happens when you apply that `.media` pattern to another selector? It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does. And the point is even @extend can get bloaty when nested, bu…

It's quite easy to create duplicate styles in the output with mixins - the compiler isn't that smart yet, do placeholders avoid all of that? I haven't seen a lot of comparisons or examples that really drive it home so far.

I'm actually working on a css post-processor script that optimizes css output. Grouping styles in the most efficient way possible is quite tricky.

Re: OOCSS + Sass = The best way to CSS

#20

Post by colinsidoti »

ianstormtaylor wrote: post #14
pknight wrote: post #11

Earlier quoted context omitted.

Based on the blog post I'm not seeing how I can't do that in Less for example. I'm using lessphp and I can build patterns like .media() { // won't compile directly width: 100%; // other cool styling } img { .media; } which would output just img { width: 100%; } Gives me similar results I think or am I missing something?

The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a long time ago, but what happens when you apply that `.media` pattern to another selector? It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does. And the point is even @extend can get bloaty when nested, bu…

"It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does."

This didn't come through entirely until I read the comment. I think an example of what mixins would produce would be helpful.

At the end of the day we have two goals: 1) keeping things easy to develop and 2) keeping the CSS filesize as small as possible.

Mixins accomplished 1 but not 2.

One potentially relevant example is bootstrap's core "btn" class, which has over 50 lines: https://github.com/twitter/bootstrap/blob/master/less/button...

When you want a button in HTML you have to add the btn class, as well as an additional class for that button's styling. IE: btn-large, btn-primary, btn-info

Bootstrap could have made this happen with just one class by implementing mixins, but that would result in each btn-primary, btn-info, etc repeating those 50 lines from the btn class.

If Bootstrap used @extend instead, that large btn class could be replaced with a multiple selector, IE: .btn-large, .btn-small, .btn-primary, etc. Then the independent styles could be defined below, as they already are, and we would just need one class to add the appropriate button style.

I guess they could do that today by just using the long selector instead of .btn, but that makes the file harder to maintain.

Let me know if I'm thinking about this wrong.

Post reply on HN