The wannabe CSS Frameworks claim ease of use, intuitive syntax, efficiency and throw around the word "curated" like they have reached some sort of nirvana. Yet I've seen some of the dumbest code ever in their bloated treasures.
Take, for example, the spacing features. One CSS Framework devotes an entire 391 lines to illegal CSS. Code that no browser can interpret or do anything with. That is padding to be equal to "auto" ... the problem, I suspect, is reliance on a pre-processor to do the building of the CSS file for you. Think of the pre-processor as programming, someone gives instruction through the pre-processor how to build the CSS. And then, no inspection of the CSS to check for validity. (By the way, I was being generous there. Passing the blame onto the pre-processor. If you look at the documents on the CSS Framework website, it's clear that is intended. It is featured in a table describing it. Of course, with no mention on what it is supposed to do.)
You can tell programmers are controlling this.
Three of the most popular CSS Frameworks have spacing helpers that are very useful. In concept, anyway. I'll just use a few examples here ... in one CSS Framework, "m-0" is equivalent to "margin: 0;" ... intuitive. It gets weird when you try "m-3" ... you'd expect that to be equivalent to "margin: 3??;" (where ?? represents units like rem, px, em, pt, etc) ... but in this particular CSS Framework it means "margin: 0.75rem;". How did we get from 3 to represent 0.75?
Programmers. Not even good programmers ... they have chosen to make their work simple, the user's have to scratch their heads to make sense of it. That's not intuitive, and it's not good UI.
I read an article from one such person ... obviously a programmer ... discussing building a CSS Framework. In it he suggests building the spacing helpers based on "calc" starting with a standardized unit. The programmer suggested "1em". In that methodology, "m-5" would be equivalent to "margin: 84px;" based on "margin: calc(5.25 * var(–space-unit));" ... (where –space-unit was defined as 1em and 1em assumed to be 16px). Oh, the explanation was just as good as this code is intuitive. This, by the way, was the solution proposed rather than the methodology used by existing frameworks, that of using the Fibonacci sequence to create the margin scale. An example of that would be m-1 equivalent to margin: 4px, m2 equivalent to 8px, and m3 equivalent to 12px (the total of the previous two declarations). May as well be "shrodinger's cat" theory ... because by the time you get to m-5, it is equivalent to 84px and the poor user trying to build a page has to pull out a calculator or count his toes nearly nine times.
Not in my CSS Framework. To be clear, I have spacing helpers in my CSS Framework. I really want to stay away from the need to add "style" attributes as much as possible.
.m-0 {
margin: 0; /* no margin */
}
.m-0\.25 {
margin: 0.25rem; /* 16px * 0.25 = 4px */
}
.m-0\.50 {
margin: 0.5rem; /* 16px * 0.5 = 8px */
}
.m-0\.75 {
margin: 0.75rem; /* 16px * 0.75 = 12px */
}
.m-1 {
margin: 1rem; /* 16px * 1 = 16px */
}
.m-1\.5 {
margin: 1.5rem; /* 16px * 1.5 = 24px */
}
.m-2 {
margin: 2rem; /* 16px * 2 = 32px */
}
.m-2\.5 {
margin: 2.4rem; /* 16px * 2.5 = 40px */
}
.m-3 {
margin: 3rem; /* 16px * 3 = 48px */
}
.m-4 {
margin: 4rem; /* 16px * 4 = 64px */
}
.m-5 {
margin: 5rem; /* 16px * 5 = 80px */
}
.m-6 {
margin: 6rem; /* 16px * 6 = 96px */
}
Note1: the backslash is an escape character - .m-0\.25 would mean that you enter your class as class="m-0.25"
Note2: the comments in the code above are for illustration purposes only
Note3: 1rem = 16px in this example
We are already familiar with using "em" and "rem". Defining our spacing like this is more meaningful when you add it to a class. You know when you add "m-5" that you are getting a margin on all four sides equivalent to 5 rem.
Isn't that more intuitive? Doesn't that make for cleaner and easier to understand HTML?