Kevin Powell - CommunityKP-C
Kevin Powell - Communityβ€’3y agoβ€’
157 replies
snxxwyy

custom property naming

Hey, i'm kinda stumped on naming conventions for my spacing properties. I use these for things such as padding blocks, flow gaps and tie them in with the utility classes for those. Currently i use the 100 - 900 naming method e.g. --space-400: XYZ; with the values going up in certain increments depending on the project, for example-
--space-100: .5em;
--space-200: 1em;
--space-300: 1.5em;
--space-400: 2em;
--space-500: 2.5em;
--space-600: 3em;
--space-700: 3.5em;
--space-800: 4em;
--space-900: 4.5em;

This has been doing the job along with changing the properties values in media queries if they get bigger on different viewports etc. But for a couple of projects i need to extend beyond the 900. So i was wondering whether i should continue to 1000 and so on or go in 25s or 50s such as --space-125: XYZ;. I'd appreciate anyones help with this, thank you in advance!
Was this page helpful?