Re: [css-grid] Specification confusing, needs improvement

Thank you for your feedback!

On Mon, Aug 11, 2014 at 11:23 AM, Axel Dahmen <brille1@hotmail.com> wrote:
> After reading through the CSS3 Grid Layout Module spec @ [ http://dev.w3.org/csswg/css-grid/ ] I feel confused.
>
> The specification introduces quite a lot new (?) CSS syntax constructs, like the slash ("/") character for column spanning or identifiers to identify column line names. I'm not quite sure whether this syntax complexity is really necessary to accomplish the goals of a grid layout, or if these could be easily avoided giving the spec a second thought.

Slashes are used on occasion in CSS as a secondary delimiter.  We
generally use spaces to separate components within a complex value,
and commas to separate repetitions of a complex value.  On occasion a
component is ambiguous with just whitespace-separation, so slashes are
used there to separate the terms.  See 'border-image' for an existing
example of this usage, or 'background' and 'font' for related but
simpler cases.

> For instance, instead of using a slash character to give a span value, it'd be sufficient to introduce a new property like, e.g., "grid-column-span".

Note that the slash is used only to separate values in the *shorthand*
properties.  You can always use the longhands (grid-row-start,
grid-row-end, grid-column-start, grid-column-end) to give the
individual values directly, without any need to worry about separating
anything.

> The specification, to me, doesn't get clear about what actually is getting defined by all the new rules. It lacks a common thread. Each of the property definitions seems unaligned and out of context compared to other CSS Grid Layout properties.

Did you read the introductory text?  The section is fairly lengthy and
goes through all the core Grid constructs and uses; the rest of the
spec generally assumes you're familiar with the concepts already and
presents things in a straightforward technical manner.

> The "grid-template-areas" property syntax looks very "colloquial" and non-mathematical.

It's not mathematical, it's visual.  Two-dimensional layout is best
expressed visually, and grid-template-areas gives authors a way to do
that, by expressing their layout in a sort of ASCII art.

> To me, the "." property value proves to be the placeholder for the bad idea behind this property design.

I don't understand.  What do you mean?

> And the "grid-template-areas" property contradicts the "grid-column"/"grid-column" properties. What if both, areas and grid-columns/rows are getting applied to an element?

There's no contradiction; the two sets work together, as defined in
<http://dev.w3.org/csswg/css-grid/#grid-definition>.

> My conclusion after reading the spec:
>
> In general, the current CSS Grid Layout specification unnecessarily bloats CSS. The specification ...
>
> (1) is missing a clear, deductive approach, thereby losing track on unnecessary properties / property values.

I'm not sure what this means.

> (2) complicates the CSS language by unnecessarily introducing new syntax constructs.

While Grid does introduce one novel syntax construct (the use of bare
parentheses in a value, serving as a sort of "unnamed function"), the
particular syntax you've noted is, while not widespread, at least
well-established in CSS.

> (3) creates a whole bunch of new, grid specific properties where more general (perhaps even already existing) properties (applicable to other layout types) might be more appropriate.

Any suggestions in this vein would be appreciated, though at this
stage in spec maturity and implementations the overall shape of the
spec is more-or-less frozen.  Note that we did identify one area of
the spec that could be generalized to other layout models - the
alignment properties - and pulled them out into a separate spec:
<http://dev.w3.org/csswg/css-align/>.  Similarly, the 'order' property
is shared between Grid and Flexbox, and we have vague plans to
generalize it as well to the other layout modes.

The rest of the properties in the spec are for establishing a grid and
positioning things in a grid, which as far as I can tell, are
definitely grid-layout specific, and wouldn't make sense to apply to
anything else.

~TJ

Received on Monday, 11 August 2014 20:14:54 UTC