When is the ideal moment to utilize SASS extensions?

Question

When is the ideal moment to utilize SASS extensions?

My current team uses SASS and I've noticed that we're extending very simple styles in our code. I fail to see the purpose of doing this. Am I overlooking something?

Below are some examples of styles from a _Common.scss file that is imported and utilized across other SASS files:

.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }

.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }

.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }

.height-percent-100 { height: 100%; }

.cursor-pointer { cursor: pointer; }

.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }

.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }

For instance:

#CategoriesContainer
{
  ul{
    li{
        &:first-child{
          @extend .font-11;
        }
        a
        {
          @extend .font-11;
          @extend .text-decoration-none;
        }
    }
  }
}

css sass

Answer 1

Answer №1

When using the extend feature, it is important to only do so when you have a specific attribute that will be used multiple times. It doesn't make sense to extend a class with a single attribute that already includes the unit value in its name.

For a better explanation on when to extend, refer to the SASS reference guide

Consider the example of two classes:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error represents a basic style while .seriousError is meant for a clear indication of a serious error. Instead of using both classes in the HTML to combine styles, we can extend .seriousError with .error:

.seriousError {
  @extend .error;
  border-width: 3px;
}

By doing this, we avoid duplicating code in our Sass file while achieving the desired styles on the page.

Refer to the guide for more examples and best practices. Avoid extending classes with single attribute classes and refrain from explicitly stating values/attributes in the selector for better semantic coding.

Take a look at this post for insights on semantic coding and its importance in your development approach.

Answer 2

When using the extend feature, it is important to only do so when you have a specific attribute that will be used multiple times. It doesn't make sense to extend a class with a single attribute that already includes the unit value in its name.

For a better explanation on when to extend, refer to the SASS reference guide

Consider the example of two classes:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error represents a basic style while .seriousError is meant for a clear indication of a serious error. Instead of using both classes in the HTML to combine styles, we can extend .seriousError with .error:

.seriousError {
  @extend .error;
  border-width: 3px;
}

By doing this, we avoid duplicating code in our Sass file while achieving the desired styles on the page.

Refer to the guide for more examples and best practices. Avoid extending classes with single attribute classes and refrain from explicitly stating values/attributes in the selector for better semantic coding.

Take a look at this post for insights on semantic coding and its importance in your development approach.

Answer 3

Answer №2

This code is unnecessarily bloated and not a recommended way to extend classes. One possible reason for using it could be to easily change properties like font size, but then the class naming becomes pointless. It would make more sense to use a class name like "small-font" instead.

It's important to consider the semantic meaning of class names and avoid overly specific or presentational ones. This usage of extending classes with a 1:1 mapping defeats the purpose of the @extend feature, which is meant to reduce the amount of CSS you write.

A better example of using @extend would be:

.media {
    padding:1em;
    border-color:blue;
    background-color:red;
    clear:left;
}

.my-media {
    @extend .media;
    background-color:green;
}

Answer 4

This code is unnecessarily bloated and not a recommended way to extend classes. One possible reason for using it could be to easily change properties like font size, but then the class naming becomes pointless. It would make more sense to use a class name like "small-font" instead.

It's important to consider the semantic meaning of class names and avoid overly specific or presentational ones. This usage of extending classes with a 1:1 mapping defeats the purpose of the @extend feature, which is meant to reduce the amount of CSS you write.

A better example of using @extend would be:

.media {
    padding:1em;
    border-color:blue;
    background-color:red;
    clear:left;
}

.my-media {
    @extend .media;
    background-color:green;
}

Answer 5

Answer №3

The Concept of Atomic CSS

Yahoo! has introduced the concept of Atomic CSS, which involves using simple CSS rules directly in your markup. Thierry Koblentz discusses this approach in a Smashing Magazine article, highlighting its benefits for large projects with inconsistent styles. Unlike OOCSS, which relies on reusable base styles for components, Atomic CSS allows for more flexibility but may require writing additional extension classes or overrides.

While Atomic CSS offers advantages, as noted by Wesley, it can pose challenges when making global style changes across a project, such as adjusting text sizes for specific selectors.

Experimenting with a variation of this technique in a sizable project, I've found it useful for handling one-off styles without embedding hard values directly in selectors. For example, consider the following CSS snippet (example fiddle):

_colors.scss

.text-white {
  color: $white;
}

.blue {
  @extend .text-white;
  background: $blue;
}

_effects.scss

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
}

.matted {
  border: 4px solid $white;
}

.shadow {
  @include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}

HTML:

<div class="blue matted circle shadow">?</div>

Considerations for Specificity

It's important to note that using Atomic CSS can lead to specificity issues, particularly when extending base-level classes with similar CSS properties. In the following example (fiddle), the border-radius might not render as expected due to conflicting CSS rules. If multiple atomic selectors reuse the same properties, conflicts can arise.

_colors.scss

.text-white {
  color: white;
}

.blue {
  @extend .text-white;
  background: royalblue;
}

_effects.scss

.squared-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded {
  border-radius: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

HTML:

<span class="circle blue rounded squared-top"></span>

Answer 6

The Concept of Atomic CSS

Yahoo! has introduced the concept of Atomic CSS, which involves using simple CSS rules directly in your markup. Thierry Koblentz discusses this approach in a Smashing Magazine article, highlighting its benefits for large projects with inconsistent styles. Unlike OOCSS, which relies on reusable base styles for components, Atomic CSS allows for more flexibility but may require writing additional extension classes or overrides.

While Atomic CSS offers advantages, as noted by Wesley, it can pose challenges when making global style changes across a project, such as adjusting text sizes for specific selectors.

Experimenting with a variation of this technique in a sizable project, I've found it useful for handling one-off styles without embedding hard values directly in selectors. For example, consider the following CSS snippet (example fiddle):

_colors.scss

.text-white {
  color: $white;
}

.blue {
  @extend .text-white;
  background: $blue;
}

_effects.scss

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
}

.matted {
  border: 4px solid $white;
}

.shadow {
  @include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}

HTML:

<div class="blue matted circle shadow">?</div>

Considerations for Specificity

It's important to note that using Atomic CSS can lead to specificity issues, particularly when extending base-level classes with similar CSS properties. In the following example (fiddle), the border-radius might not render as expected due to conflicting CSS rules. If multiple atomic selectors reuse the same properties, conflicts can arise.

_colors.scss

.text-white {
  color: white;
}

.blue {
  @extend .text-white;
  background: royalblue;
}

_effects.scss

.squared-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded {
  border-radius: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

HTML:

<span class="circle blue rounded squared-top"></span>

Answer 7

Answer №4

By following this approach, you have the option to seamlessly integrate it into the HTML code. This seems to follow the OOCSS methodology, making it easier to extend the styling since it's already included in the CSS. While this method offers great flexibility, it also runs the risk of becoming disorganized if not managed properly.

Answer 8

By following this approach, you have the option to seamlessly integrate it into the HTML code. This seems to follow the OOCSS methodology, making it easier to extend the styling since it's already included in the CSS. While this method offers great flexibility, it also runs the risk of becoming disorganized if not managed properly.

Answer 9

Answer №5

The utilization of the extend option in this context is lacking. It is best suited for expanding classes with additional content, and in such situations, extend can prove to be quite beneficial. To learn more about extend and its various options, you can refer to this informative guide here.

Answer 10

The utilization of the extend option in this context is lacking. It is best suited for expanding classes with additional content, and in such situations, extend can prove to be quite beneficial. To learn more about extend and its various options, you can refer to this informative guide here.

When is the ideal moment to utilize SASS extensions?

Answer №1

Answer №2

Answer №3

The Concept of Atomic CSS

_colors.scss

_effects.scss

HTML:

Considerations for Specificity

_colors.scss

_effects.scss

HTML:

Answer №4

Answer №5

Similar questions

Issue with positioning in IE11 when using `top:0` and `bottom:0` inside a table

Ensure that the element is positioned above other elements, yet below the clickable area

Adding Multiple CSS Classes to an HTML Element using jQuery's addClass Feature

Two elements occupy the rest of the vertical space

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

align video element to the right within a container div

Cannot access mobile navigation due to expanded browser search bar

A step-by-step guide on making an animation series with html and css keyframes

Are Bootstrap Input groups inconsistent?

Struggling to target specific elements in CSS that are dynamically generated through JavaScript

I require the slideshow div to smoothly move elements down as it transitions between slides

Spread out elements equally into columns

creating center-focused gradients in react native using LinearGradient

CSS selector for detecting elements with empty or whitespace-only content

Dynamic HTML gallery that supports the addition of fresh images

Show items in the sequence of clicking

Design HTML dropdown menu

Properly appears in Chrome, but experiences issues in Internet Explorer 11

Make changes to external CSS using HTML and JavaScript