Re: suggestion: children() selector for subqueries

Csaba Dobai skrev:
> Dear List,
>
> I'm just subscribed and searched the archives as it is suggested by
> w3c, I hope I wouldn't disturbing.
>
> Please, let me explain my idea, which would be useful and looks very
> missing: a kind of making CSS subqueries.
>
> First, let me explain a sample use-case. By that, I'm going to use a
> short HTML code, assuming that I use Bootstrap 3:
> <div class="container>
>   <div class="row">
>     <div class="item col-md-4 col-sm-4">
>       ...
>     </div>
>     <div class="item col-md-4 col-sm-4">
>       ...
>     </div>
>     <div class="item col-md-4 col-sm-4">
>       ...
>     </div>
>   </div>
> <div>
>
> In this case I use "item" classes because of the other classes have no
> meaning about the role of those DIVs, "col-*" classes are only for
> layout purposes.
>
> In the case if I want to query containers which any of their children
> DIVs using "col-*" classes, or which of them used, I must to add JS
> which is querying the container and adding an indicator class to it,
> eg. in a jQuery-way:
> if ($('.container .col-lg-4').length > 0
> $('.container').addClass('col-lg');
> if ($('.container .col-md-4').length > 0
> $('.container').addClass('col-md');
> if ($('.container .col-sm-4').length > 0
> $('.container').addClass('col-sm');
> if ($('..container .col-xs-4').length > 0
> $('.container').addClass('col-xs');
>
> As an addition, let imagine this JS snipet to col-lg-1..12,
> col-md-1..12, etc. which will results 48 lines of mess code.
>
> Now I able to query and targeting the container like this:
> .container.col-lg { ... }
> .container.col-md { ... }
> ...etc.
>
> My suggestion what if CSS would have a children() selector for placing
> a subquery as an argument:
> .container:children(.col-lg-4) { ... }
> .container:children(.col-md-4) { ... }
> ...etc.
>
> In the above example I can add rules to .container regarding of its
> children, without JS, and without break the CSS control-flow.
> Additionally, this idea could be implemented easily because no need to
> use new operator, only reuses the available query parser.
>
> I know that my sample case is not that real, but points to real-world
> practice, eg. thought I want to control the width of the container
> regarding to framework-driven breakpoints (defined by @media queries)
> without the need of repeating the media-queries defined by the
> framework. Even more usable if you think about I want to make my
> component compatible to more than one CSS frameworks, which may use
> different breakpoints. Let me explain this last issue:
>
> @media (min-width: 768px) {
>   /* for bootstrap 3 */
>   .container { ... }
> }
>
> @media (min-width: 800px) {
>   /* for dummy framework */
>   .container { ... }
> }
>
> These would results in a conflict very easily, while this would not so:
>
> .container:children(.col-md-4) { ... }
> .container:children(.column-df-4) { ... } /* assuming that this
> belongs the dummy framework */
>
> Even if I know that there's a best-practice for placing these two
> different sets of rules into two different CSS files, there are a lot
> of case where people mixing two or more CSS frameworks or simply
> unsure where the breakpoints are exactly, or the breakpoints are
> generated using SASS or LESS and there are no guarantee for if the
> same version of the same framework contains the same exact breakpoints
> in the real, because of customization.
>
> Maybe, there are some more usable cases and I'm sorry if I'm looks not
> so well-thought about it, I just want to point to a few cases which
> based on my very own personal experiences.
>
> Best regards,
> Csaba
What is wrong with plain old .conteriner .col-md-4 and so on?

Received on Tuesday, 10 November 2015 19:05:16 UTC