Csswg-drafts: naming conventions

[isomorphisms]

Using the word flex multiple times, as in flex-flow, flex-start, etc, is confusing. I don't need to prefix every word with flex-, I won't remember whether it's - ,_, or ., and I probably won't remember whether the correct synonym to pick is start, beginning, init, zero, front, baseline, etc.

[isomorphisms]

flex-direction, flex-wrap, as well. Why not just direction, flow, and wrap?

[SelenIT]

direction already exists as a separate property totally unrelated to flexboxes. Wrapping also occurs in many other contexts than flexboxes. Is the fact that border-width property is not called just width also confusing for you? In my opinion, namespacing things with prefixes that unambiguously identify the relevant context is completely OK, it's quite common in CSS and in many other computer languages as well.

But there are proposals to reduce the duplication with new syntax, e.g. property nesting. So, in theory, at some point the flexbox declaration might become like .something { flex: { flow: row wrap; } }. But would it really be more readable?

[SebastianZ]

Also note that you can already use the keywords start and end instead of flex-start and flex-end.

I won't remember whether it's - , _, or .…

In CSS keywords are always separted by -. I think the only exception to this are the color keywords including currentcolor, where the words are not separated.

I probably won't remember whether the correct synonym to pick is start, beginning, init, zero, front, baseline, etc.

beginning, init, zero, and front are not used in CSS and the word "baseline" is used in regard of inline alignment, mostly text alignment.

Sebastian

[kleinfreund]

I think the only exception to this are the color keywords including currentcolor, where the words are not separated.

@SebastianZ And nowrap. 🤓

[tabatkins]

Ugh, nowrap. Such a terrible precedent to be stuck with.

Anyway! @isomorphisms, as @SelenIT said, we already have properties by some of those names. In general, extremely generic names are reserved for extremely generic features, while we group related features under prefixes. For example, everything to do with borders is prefixed with border-*.

As @SebastianZ said, CSS always uses -, except for a few places where don't use any separator at all, because we're importing a name from some other system. This is consistent and system-wide, unlike JS naming conventions, so you learn it once and you can apply it everywhere. Same with the directionality keywords - we use exactly one pair, start and end, and sometimes prefix them with a context when necessary (flex-start indicating that it's using the flex direction, block-start and inline-start indicating it's in the block or inline axis, etc). Again, consistent and system-wide, so you learn it once and apply it everywhere.

In particular, in justify-self: flex-start, the flex- (or something like it) is necessary, because justify-self: start already exists, and means something different. (It's relative to the writing-mode, not the flex direction. In an English page with flex-direction: row-reverse, justify-self: start aligns them to the left, while justify-self: flex-start aligns them to the right.)