Menu icon Foundation

My Posts

No Content

My Comments

lmseo commented on Vinay Raghu's post almost 5 years

This is actually a great idea that I was thinking for quiet some time. My biggest problem with using front-end frameworks is that I have to sacrifice performance over fast prototyping. Compiled files are several times bigger due to the fact that CSS files usually include a large number of styles that never get used throughout the project.

The use of SASS @entend and placeholders is a way I use in my own projects to accomplished two separate goals. First, decrease file size by only including styles that I'm actually using in the project. Placeholders don't get compiled unless they are extended. Take for example:

.large-8{width:66.66667%}

This style will show in your final CSS file even if you never use it anywhere in your project. However, if written using SASS placeholders

%large-8{width:66.66667%}

The style never gets included unless it is extended somewhere in the project. Or take for example when working WordPress structural wraps classes are called .wrap as opposed to .row in Foundation.
Normally, I would use this:

.wrap{
@extend{row}
}
which compiles to:
.wrap, .row{....}

However, if using placeholders .row never gets compiled and .wrap is the only class showing in the final CSS, way cooler.

Finally, being able to use semantic CSS in my projects as opposed to a chain of classes to accomplish the same result which I believe @VINAY RAGHU was originally aiming for with this post.

I include a post on OOCSS and SASSS that I believe explains this point in more detail.
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Vinay Raghu's post almost 5 years

This is actually a great idea that I was thinking for quiet some time. My biggest problem with using front-end frameworks is that I have to sacrifice performance over fast prototyping. Compiled files are several times bigger due to the fact that CSS files usually include a large number of styles that never get used throughout the project.

The use of SASS @entend and placeholders is a way I use in my own projects to accomplished two separate goals. First, decrease file size by only including styles that I'm actually using in the project. Placeholders don't get compiled unless they are extended. Take for example:

.large-8{width:66.66667%}

This style will show in your final CSS file even if you never use it anywhere in your project. However, if written using SASS placeholders

%large-8{width:66.66667%}

The style never gets included unless it is extended somewhere in the project. Or take for example when working WordPress structural wraps classes are called .wrap as opposed to .row in Foundation.
Normally, I would use this:

.wrap{
@extend{row}
}
which compiles to:
.wrap, .row{....}

However, if using placeholders .row never gets compiled and .wrap is the only class showing in the final CSS, way cooler.

Finally, being able to use semantic CSS in my projects as opposed to a chain of classes to accomplish the same result which I believe @VINAY RAGHU was originally aiming for with this post.

I include a post on OOCSS and SASSS that I believe explains this point in more detail.
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content