Suitable styling
Hey, i have a question about inline styles. I know for the most part they are bad practice however in a project i'm building the majority of my styles for elements are utility classes with one being a
flow class which adds spacing between sections.
This is defined as:
Considering i have multiple sections using this class, i was wondering if it is suitable to use inline styles to define the spacing of the --flow-gap variable for the sections and only this to allow for easier scanning and editing of the layout rather than having to dig through my css to look for the spacing values. For example:
I would much appreciate any insight into this, thanks in advance!10 Replies
I'm not a fan of this... if nothing else, it's inconsistent with the rest of styles applied in the HTML document(s). Just create additional classes with varying spacing values. If the concern is really about "digging through" your CSS code, that's a symptom that your code is perhaps a bit too messy, and this may be a good opportunity to take some time to make it more concise and easier to navigate.
For example, if you're concerned that you will end up with too many classes that define the gap, you could decide upfront various sizes that you will use throughout your code. Otherwise, you may be simply applying gaps that seem to work for one place but not another. Having defined sizes can help you make your overall design more cohesive.
it's more the fact there will be too many classes simply just defining the gaps 😅, but having variables with the different sizes sure sounds like a good plan, it did cross my mind but i just thought it may be over doing it but it doesn't seem like it is thanks to what you've said, thank you for your help!
How many is too many?
You can start that way for now but I would say this is one of those things you should revisit at some point.
I was trying to find a video where Kevin did something like this but I can't find it. This one follows a similar approach, just not specifically with sizes, used for things like padding and margin, but with font-sizes which ultiamtely is the same concept: https://www.youtube.com/watch?v=h3bTwCqX4ns. Fast forward to the custom properties (timestamps in description) and then to creating utility classes.
what a coincidence 😅, that video is where i learnt about all these custom property concepts! i even utilize his
padding-block-XYZ variables sometimes. I wouldn't say i have many, so i could just create max 5 for example with small, medium, large naming patterns etc.Exactly something like that. The idea being that you define the sizes upfront and reuse them for other custom properties as well. Something like
--size-1: 1.25rem (for example) and then do things like --flow-1: var(--size-1);, so you immediately and always know what flow-1 means. If you ever increase the original variable, everything else is also updated and remains consistent.
It could also be --size-sm/md/xl or whatever, something that makes sense to you but also remains consistent throughout the code and not just in regards to gaps. You could apply this for other utility classes like margin and padding and so on.ah yeah i get what you mean, awesome, appreciate the help!
It definitely increases complexity a bit but is much more flexible in the long run.
yeah for sure, so i've tied it in with my padding block utlity classes too, is this the sort of layout you were explaining?
https://codepen.io/deerCabin/pen/jOXqJQY
Yes, something like that, now you can use the same sizes all around and it'll be easier to understand at a glance from the HTML, while at the same time you can search for it quickly if you need to check or change it.
Awesome, super glad i know that now, thank you for your help!