Tachyons: Question: why the double-dashes?
Why are double-dashes in br--top, b--black, absolute--fill etc.?
I copied the syntax in my library: https://github.com/fab1an/react-native-tachyons, but I'm not sure if I'd not rather lose the double-dashes.
Was there a reason for this naming?
fab1an
All 14 comments
I think it's BEM styling.
*here's a good introduction http://cssguidelin.es/#bem-like-naming
tao
on 17 Jul 2016
But there's not a double hypen everywhere. bg-black but b--black,
fab1an
on 18 Jul 2016
@fab1an the double dashes are unrelated to bem. They are a result of user testing and watching people struggle to understand why some things weren't working as expected. The double dash indicates that that class relies on the presence of another class to work. I.e b--black does nothing if you put that class on an element. It must be used with bt, ba, bb, br, etc.
Declaring top, bottom, right, left as 0, won't do anything unless you've relative or absolutely positioned the element.
I found that when working with teams of both beginner and expert css folks, the double dashes reduced confusion. But they could likely be documented better here.
mrmrs
on 20 Jul 2016
That makes sense, thanks for the answer.
Btw. I found that "--" is a nice visual reminder of a border, that's why I like them.
fab1an
on 20 Jul 2016
@fab1an Any interest in moving your project to the tachyons-css org? Would love to have it as an official part of the ecosystem. But no worries if you are not interested at all.
mrmrs
on 20 Jul 2016
Thinking about it. What would that imply?
fab1an
on 20 Jul 2016
@fab1an Just imply it's officially apart of the ecosystem! You'd be free to continue do whatever you want with the project. It PROBABLY doesn't make a big difference for your project. Ideally it would increase visibility to it and help people looking at the tachyons org to find an additional react resource.
mrmrs
on 20 Jul 2016
I think I'll keep it separate for now, but I'm thinking about it.
Would it mean merging the documentation or the github repositories?
I'm also not sure how if it wouldn't be too confusing because RN works a little different. (no style inheritance, no % of parent-width, "relative" display by default, restricted flex-box model with different defaults, …)
fab1an
on 20 Jul 2016
Nah no merging of repos or docs. It would literally just sit at github.com/tachyons-css and you'd be a made a core contributor that's all. No worries if it isn't of interest.
mrmrs
on 21 Jul 2016
Ok, let's move it there, since it already shares the names and everything.
fab1an
on 21 Jul 2016
{top,left,right,bottom}-1 requires absolute or relative. yet only 1 -.
kentor
on 22 Jul 2016
@mrmrs Transferred it, but I think I accidentally gave push access to everyone, where can I change that?
fab1an
on 22 Jul 2016
@fab1an Should be in settings - but it doesn't look like anyone has push access but you. I can test later.
mrmrs
on 22 Jul 2016
@mrmrs I wasn't admin apparently, works now, thanks!
fab1an
on 23 Jul 2016
Related issues
johno
·
6Comments
j-greig
·
3Comments
johno
·
6Comments
SiamKreative
·
7Comments
tabeth
·
4Comments
Most helpful comment
@fab1an the double dashes are unrelated to bem. They are a result of user testing and watching people struggle to understand why some things weren't working as expected. The double dash indicates that that class relies on the presence of another class to work. I.e b--black does nothing if you put that class on an element. It must be used with bt, ba, bb, br, etc.
Declaring top, bottom, right, left as 0, won't do anything unless you've relative or absolutely positioned the element.
I found that when working with teams of both beginner and expert css folks, the double dashes reduced confusion. But they could likely be documented better here.