7 ms·
The shortening of properties is very much a bad idea and should be avoided. "What the hell is `mb`?" is going to come up a lot.
by krainboltgreene 9y ago
The shortening of properties is very much a bad idea and should be avoided. "What the hell is `mb`?" is going to come up a lot.
- javajosh 9y agoIn fairness the code is live-editable and so you can figure out what it means by changing it and seeing how the output differs. (mb means margin bottom).
- krainboltgreene 9y agoA legacy production application is not live-editable in the same way. I still don't know what `my` means.
- rmetzler 9y agoA little trial and error, and I think I figured it out: - m = margin on all sides - mt = margin top - mb = margin bottom - ml = margin left - mr = margin right - mx = margin on x axis (left & right) - my = margin on y axis (top & bottom)
- cowmoo728 9y agoIs there any reason to use shorthand like mb instead of using the React standard marginBottom?
- pygy_ 9y agoFWIW, marginBottom is not a React "standard", it's a DOM getter on the style object: document.body.style.marginTop = '200px' The non-camel-case version works as well (in modern browsers, there was a time when browsers supported either one or the other): document.body.style['margin-top'] = '400px'
- javajosh 9y agoI'd really like to understand why -3 for such an innocuous comment. Live-editable code is an important tool for just this reason.
- phpnode 9y agoGuessing you got downvoted because it's not really relevant - live editable code is nice for docs but doesn't explain why a property is poorly named.
- javajosh 9y agoI understood the OP as saying they couldn't figure out what "mb" meant because the author didn't define it in the text. I noted that there was another path to figuring out what it meant, by changing the live-editable code and seeing what it does.
- dguo 9y agoHaving a live-editable example is certainly nice, but you shouldn't have to fiddle around with a parameter to see what it does. It should be clearly documented so that you know what to expect and what the intention is. Otherwise, the behavior that you observe could be a bug for all you know.
- dkersten 9y agoIts also useless for discoverability. Sure, you might be able to figure out some code you read in an example through trial and error, but you won't learn what's actually available.
- bobwaycott 9y agoI first encountered this with tachyons. It takes some getting used to, but it winds up feeling alright once you do. Maybe that’s just for folks who like fewer keystrokes, though. Admittedly, it’s not the easiest thing to approach cold.
- atrilumen 9y agoI think it's a very short hump to overcome, and then you're just rolling with Tachyons.
- bobwaycott 9y agoI’d agree. I can see how it isn’t for everyone. But I like typing fewer characters when there’s a system behind it. :)
- jasim 9y agoI'd agree too. For those who are turned off by the looks of it, you should give a try. Read some experience reports here: https://medium.com/@cole_peters/building-and-shipping-functional-css-4f29b947bcb9 https://medium.com/@cole_peters/building-and-shipping-functi... and https://hackernoon.com/full-re-write-with-tachyons-and-functional-css-a-case-study-part-1-635ccb5fb00b https://hackernoon.com/full-re-write-with-tachyons-and-funct...