Skip to content
This repository was archived by the owner on Aug 8, 2023. It is now read-only.

Commit 9778e89

Browse files
committed
Remove "caveates" section on extends
1 parent 0cdf02b commit 9778e89

1 file changed

Lines changed: 0 additions & 7 deletions

File tree

css/sass-best-practices/readme.md

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,6 @@ Also notice how we still included the original `.c-button` class in the SCSS. Af
124124
This technique is described in detail in Chris Lamb's article [Mastering Sass Extends and Placeholders](http://8gramgorilla.com/mastering-sass-extends-and-placeholders/).
125125

126126

127-
### Caveats
128-
129-
Now it's true that we have a workaround for one of the problems caused by extends in Sass. However, keep in mind that there is still a lot of caution that must go into using `@extend`. You must keep in mind that if you use it too much, then your code can still become extremely bloated.
130-
131-
Take [this example](http://sassmeister.com/gist/c06688abd91d0c255e1c). This can easily happen on a real project if we are not careful. The lesson to take away from here is that if you extend too much, and if you start seeing compiled selectors that are unreadable, then chances are you are doing something wrong. At that point you may want to refactor your code to something more reasonable. Or you should consider adding the class that you have already to your markup instead of allowing your CSS to bloat.
132-
133-
134127
### Genuine Usecases
135128

136129
__Scenario 1__: There are situations where you want to have default styles on elements like lists or headings, but you may also need classes for those same styles to use when you can't use the exact markup. Good real life example is when you need a heading to be an `<h3>` but it must look like an `<h1>` or vice versa.

0 commit comments

Comments
 (0)