How can I reduce the size of my scss code?
I started writing classes like:
.small-bottom-margin { margin-bottom: $margin; }
.small-top-margin { margin-top: $margin; }
.medium-bottom-margin { margin-bottom: $margin *2; }
.medium-top-margin { margin-top: $margin *2; }
.large-bottom-margin { margin-bottom: $margin *4; }
.large-top-margin { margin-top: $margin *4; }
Soon I wanted to point out what happened on different screens, for example (for a small example of a bottom margin):
@media #{$small-only} { .small-bottom-margin-sm { margin-bottom: $margin; }}
@media #{$medium-only} { .small-bottom-margin-md { margin-bottom: $margin; }}
@media #{$large-only} { .small-bottom-margin-lg { margin-bottom: $margin; }}
@media #{$small-up} { .small-bottom-margin-sm-up { margin-bottom: $margin; }}
@media #{$medium-up} { .small-bottom-margin-md-up { margin-bottom: $margin; }}
@media #{$large-up} { .small-bottom-margin-lg-up { margin-bottom: $margin; }}
@media #{$medium-down} { .small-bottom-margin-sm-mp { margin-bottom: $margin; }}
... etc. for all margin sizes (medium and large), and for the top margin.
I find it extremely practical in terms of the readability of my html + speed for adding fields through my application, which is often a pain when you have a complex layout, but it seems to take a very long time to write in my css.
Is this really bad practice? If not, is there some css function that would allow me to automatically generate all this code?
source to share
I think it's a matter of your own style and coding taste in the first place, but to me these classes seem "unearthly".
What if one day you decide what is more appropriate for these items to have padding
instead margin
. So you just do the following:
.small-bottom-margin {
/* margin-bottom: $margin; */
padding-bottom: $margin;
}
It works, but it makes your class name stupid. Very similar to the class called .red-button
. Naming it .alert-button
would be much more promising proof.
I usually name classes after what their function is.
If you want to go that route anyway, you can keep the SCSS drier by doing something like this.
$breakpoints: (
'sm': $small-only,
'md': $medium-only,
'lg': $large-only,
'sm-up': $small-up,
'md-up': $medium-up,
'lg-up': $large-up,
'sm-mp': $medium-down
);
$sizeFactors: (
'small': 1,
'medium: 2,
'large: 4
);
$directions: (
'up',
'down',
);
@each $breakpointKey, $breakpointValue in $breakpoints {
@media #{$breakpointValue} {
@each $sizeFactorKey, $sizeFactorValue in $sizeFactors {
@each $direction in $directions {
.#{$sizeFactorKey}-#{$direction}-margin-#{$breakpointKey} {
margin-#{$direction}: $margin * $sizeFactorValue;
}
}
}
}
}
source to share
Iterate using different sizes, for example:
$sizes: (
'sm': $small-only,
'md': $medium-only,
'lg': $large-only,
'sm-up': $small-up,
'md-up': $medium-up,
'lg-up': $large-up,
'sm-mp': $medium-down
);
@each $key, $value in $sizes {
@media #{$value} { .small-bottom-margin-#{$key} { margin-bottom: $margin; }}
}
source to share
You have too many classes. You basically just copy all css properties just to avoid using inline styles, which is really suboptimal, but definitely better than doing something like this.
When you apply a CSS class to an element, it should first say that that particular element is a class , not describe what type of visual style it should apply.
According to the HTML / CSS style guide , under Id and cool name, they say that
/* Not recommended: presentational */
.button-green {}
.clear {}
and should have something that indirectly means more properties at once, like
/* Recommended: specific */
.contact-image {}
.btn-primary {}
.video {}
This way, you avoid an excessive number of classes on the element (I think you should apply at least 4-5 of them to make the element look the way you want) and you also add a value for the element. In HTML, the meaning is always good.
In addition, assuming that you have when your element is not satisfied in full class, but rather a variation of more current, you can either add the difference in the string, or create variations of classes (eg, .disabled
, .big
, .full-width
), if you think they are may appear again in the future.
source to share