use --col var instead of aside

[sylvainpolletvillard]

The problem with aside element is that semantically, aside contains secondary content that is not related to the main content. That means it is semantically incorrect to put an aside element inside a main element. This can impact search engines indexation and accessibility tooling for people with disabilities.

Other basic CSS stylesheets solve this by using classes, but since you claim to be classless, I propose you another solution: using a style attribute selector that contains a user defined --col CSS variable. This is a bit more verbose but has the advantage to define the colspan for the grid, letting you do this:

Another option is to use a custom attribute like data-col="3", but attr(data-col number) has zero browser support which means you have to manually declare all possible values. CSS vars is much more flexible in this regard

[vladocar]

Wow, that is next level hack :) I like it, but it defeats the purpose of not having classes. It looks like class solution with extra steps (quote from Rick and Morty). Nevertheless it works and gives extra functionality with little effort. Let me think how to implement it ..

Thanks for taking the time for implementing this solution.

[sylvainpolletvillard]

Classless.de uses classes for this purpose, which is quite ironic. Problem with classes is the same than attributes, you need to declare every possible value possible in the CSS selector. Often, they reduce the choice to 12 columns, which makes impossible to make 1/5 sidebar for example.

[vladocar]

I used this solution in few of my previous class frameworks like https://github.com/vladocar/infinity-css-grid/blob/master/grid.css. But never [class*="column"] or using var() in combination with style to give extra dynamic capabilities to CSS.

[vladocar]

I've implemented your solution as optional.

https://github.com/vladocar/Basic.css/blob/master/grid.md

[sylvainpolletvillard]

The main problem is the use of aside, and you are still using it. If you don't like css vars then use classes or pick another element like article or a sub section. Just don't ignore semantics, every HTML element has a purpose

[vladocar]

Yes, I agree. aside is not semantic. Probably section>section children element is better solution.

[sylvainpolletvillard]

I'm closing the PR if you go with section>section. No need to support CSS var through this "complex" grid as you call it.

Yet if you allow me to give you some advice, you should not make your choices based on what feels beautiful or ugly to you. It's highly subjective and may divert your attention from quality and usefulness

[vladocar]

I personalty think that your solution is brilliant. That is why I use decided to use it. It can be used with any HTML tag in combination with section.

I just wanted to say: thank you for your contribution.