Using CSS Custom Properties to Reduce the Size of your CSS #Dev

codyhouse.co
3 months ago
Using CSS Custom Properties to Reduce the Size of your CSS

Unlike SASS variables, CSS Custom Properties can be modified in class selectors, allowing you to create abstractions and reduce the size of your CSS. Let me show you an example! In the CodyHouse Framework, we use the .grid-gap-{size} utility classes to set the spacing among grid items: .grid { display: flex; flex-wrap: wrap; > * { flex-basis: 100%; } } .grid-gap-xxxs { margin-bottom: calc(-1 * var(–space-xxxs)); margin-left: calc(-1 * var(–space-xxxs)); > * { margin-bottom: var(–space-xxxs); margin-left: calc(var(–space-xxxs)); } } .grid-gap-xxs { margin-bottom: calc(-1 * var(–space-xxs)); margin-left: calc(-1 * var(–space-xxs)); > * { margin-bottom: var(–space-xxs); margin-left: calc(var(–space-xxs)); } } .grid-gap-xs { margin-bottom: calc(-1 * var(–space-xs)); margin-left: calc(-1 * var(–space-xs)); > * { margin-bottom: var(–space-xs); margin-left: calc(var(–space-xs)); } } .grid-gap-sm { margin-bottom: calc(-1 * var(–space-sm)); margin-left: calc(-1 * var(–space-sm)); > * { margin-bottom: var(–space-sm); margin-left: calc(var(–space-sm)); } } .grid-gap-md { margin-bottom: calc(-1…

Leave a Reply