Menu icon Foundation
SASS/CSS best practices

I am tying to figure out best practices for code structure using SASS. I have structured/styled a section of code in two different ways with the same result. It seems to me that they generate about the same amount of code.

Example 1 (Staff 1) names the section and then uses mixins to style the various sections. This means that the html elements do not have classes and are just defined by their parent section.

Example 2 (Staff 2) adds class names to the html elements and defines those classes in the css (still using some SASS variables).

I am having trouble getting all of the code to post here so I have created a version on codepen.

http://codepen.io/4culture/pen/azVNwp

Which is the better way to do this?

Sassmixinsclassescssbest practices

I am tying to figure out best practices for code structure using SASS. I have structured/styled a section of code in two different ways with the same result. It seems to me that they generate about the same amount of code.

Example 1 (Staff 1) names the section and then uses mixins to style the various sections. This means that the html elements do not have classes and are just defined by their parent section.

Example 2 (Staff 2) adds class names to the html elements and defines those classes in the css (still using some SASS variables).

I am having trouble getting all of the code to post here so I have created a version on codepen.

http://codepen.io/4culture/pen/azVNwp

Which is the better way to do this?

Rafi Benkual almost 5 years ago

It depends on what you're trying to achieve. The code output (total) is about the same but if you write semantic markup your HTML is cleaner.

We described it in one of our lessons - https://zurb.com/expo/lessons/42

"CSS frameworks are great for setting up responsive grids, but often require extra markup, usually in the form of presentational class, that makes source code hard to decipher. Using nothing but div elements make code more confusing — which belongs to an open ? And isn't "product-list" easier to figure out than "large-block-grid-3" ?"

If go this route, you can further reduce code output:

Once you’ve stopped using all of the grid classes in your markup, you can tell Foundation to stop including those classes in the CSS that it outputs.

In _settings.scss, look for the $include-html-grid-classes variable and set it to false:
$include-html-grid-classes: false;