5 ms·
This is pretty close to how I typically code sites, with a collection of commonly used formatting classes defined in my CSS like 'margin-b10', 'padding-3pc', 'p
by WiseWeasel 11y ago
This is pretty close to how I typically code sites, with a collection of commonly used formatting classes defined in my CSS like 'margin-b10', 'padding-3pc', 'padding-h10' (left and right), etc. I have a fairly long list of those I typically bring from one project to the next, for one-off use throughout. I still use more comprehensively defined classes for widgets and content types, but for things like spacing out inputs on the same line, these are pretty handy.
Not sure how well this is going to work with the CSS being applied by JS after the render; I suspect it would tend to suffer from FOUCs. It would be nice to see an example implementation to allay those concerns. I do like the basic pattern though, as long as it's used sparingly. I find it more convenient to add classes like these than to use inline styling, even if there's no operational advantage, as these format classes are often applied in addition to other classes.
- lf-non 11y agoI wrote something similar a while ago (https://gist.github.com/lorefnon/ddb1880e64d8e1071bb0 https://gist.github.com/lorefnon/ddb1880e64d8e1071bb0) -- never intended to use this in production but had a good laugh with co-workers when I showed it to them.
- dheera 11y agoWhat's the point of creating a class called 'margin-b10'? Why not just inline your CSS, i.e. style="margin-bottom:10px;"? Creating a class called margin-b10 is tantamount to the following C code: int one = 1, two = 2, three = 3; And then using 'one', 'two', and 'three' instead of 1, 2, 3.
- Semiapies 11y agoHorribly, that sort of thing has been done by inexperienced programmers told to use constants instead of hard-coding numbers into their code...
- WiseWeasel 11y agoBecause there are a few paddings and margins that are used repeatedly, and it's convenient. Clearfixes and floats are another common use case. An anchor that I want to look like a button might have classes like "button orange float-r margin-r20".
- dheera 11y agoIf you're repeatedly using 10px paddings, it doesn't really save anything to name your classes 'padding-10px'. Inlining your CSS is just as efficient. Plus, if you have to change your styling, e.g. from 10px to 12px, all of a sudden you have to change both the definition of the class AND the name of the class, which is a mess. And if you don't, you have a class called 'padding-10px' that is actually 12px and that is a real mess. If you're naming your classes to create abstractions, i.e. 'article-box' or 'navbar-section' then it makes a lot more sense.