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

Hi Tab, sorry for my late reply. I've been on vacation.

I see your points.

Let me still point out the issues I see in the spec:


-- (a) ----

In § 1, "Introduction and Overview", it reads "but unlike tables, grid 
layout doesn’t have content structure"... However, the grid specification 
repetitively reads "columns and rows" (e.g. § 1.1, "Background and 
Motivation").

If a grid layout doesn't have content structure, if "children of a grid 
container can position themselves such that they overlap and layer similar 
to positioned elements"... then it doesn't have something like "columns" and 
"rows". At most it does have "areas" or "blocks".

So I suggest the wording to change:

columns = areas
rows = areas
grid container = grid
grid item = block

This is also true for grid property names. There shouldn't be 
"grid-column-..." or "grid-row-..." properties.

The specification shows ample bias on table terms, which it shouldn't.

There should just be a "grid-area" shorthand property defining all necessary 
values to define an area.

The "grid-area" shorthand property should then unfold into separate 
"grid-area-..." properties, like "grid-area-align" etc..

There could be a "grid-group" shorthand property unfolding into separate 
"grid-group-..." properties defining how "grid-area-..." items within that 
"grid-group-..." should be arranged.


-- (b) ----

I don't see the true benefit of a CSS grid if there already is a CSS flex 
specification. What's the advantage? What's the distinction?

Wouldn't it have been sufficient to have added a "flex-max-items" property 
to the flex specification (forcing a wrap after {n} items have been added to 
a flex group), extending the flex-flow property to "<flex-direction> || 
<flex-wrap> || <flex-max-items>"


-- (c) ----

The grid property definition seems too complex. Is it really necessary to 
define a grid in terms of "grid-row-start", "grid-column-start", 
"grid-row-end", and "grid-column-end"? Shouldn't these terms be confined to 
tables?

What's the benefit of defining a grid this way if table layout already 
provides such functionality?


Cheers,
Axel



===================================

"Tab Atkins Jr."  schrieb im Newsbeitrag 
news:CAAWBYDAzRbZuwjXXcqxQ2Eckj4YQK32aU9juSQspk7FcUKzBtw@mail.gmail.com...

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 Wednesday, 27 August 2014 11:27:50 UTC