Re: [csswg-drafts] [css-grid] Decorative grid-cell pseudo-elements

Hi @jensimmons ! I love the idea! It tackles a lot of current problems. I am currently writing a longer comment about the implications for paged media and it's relations to flexbox, grid and multicolumn-layouts. But before i can finish it, I would like to understand your proposal a little bit better.

In your [presentation on slide 38](https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016?slide=38) you use the `grid` property to place an grid-element in its grid-container. Is this new? Or did you meant `grid-area`? 

Using my current grasp of grids, I would write something like this:

````
#grid-container{
    grid: repeat(3, 1fr) / repeat(3, 1fr);
}

@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}

foobar {
  background: yellow;
}
````

## Other examples 

### Use of named grid-template-areas defined in the grid container: 
 
````
@region #grid-container foobar {
  grid-area: left; 
}
````

### Selection of a whole column to style:

````
@region #grid-container left {
  grid-column: 1 2; 
}
````

## Relation to named grid-template-areas

How does your proposal relate to `grid-template-areas`?
It feels to me like a second mechanism to name them. With the added bonus, that this way named areas could overlap. 

Would something like this work:

````
@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}
.childelement {
    grid-area: foobar
}
```` 
Though then I would suggest `@area` or `@template-area` for the keyword.

## Maybe a different selector-syntax?

I am concerned about this part: 

```
foobar {
  background: yellow;
}
````

Simple element-selector syntax for a named grid-area seems dangerous to me. 

Because changes in the HTML-Spec might introduce elements that are identically named to areas named by CSS-authors and break the page. I guess that's the reason, why we have the two dashed at the beginning of css-custom properties.

Maybe a Pseudo-Selector, At-Rule or something similar to the custom-property syntax would work better. 

I like the close alignment to the `@keyframes` syntax. But I am not sure about it. Keyframe Animations are quite global – a bit like custom-properties. Grid-Areas on the other hand are tightly bound to the Grid Container itself.

Can you point me to additional resources, where I can learn the formal definitions and differences between these mechanisms. Especially the formal difference between pseudo-selectors and at-rules are quite foggy to me at the moment. 

-- 
GitHub Notification of comment by g12n
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/499#issuecomment-353594465 using your GitHub account

Received on Friday, 22 December 2017 13:03:38 UTC