Re: dynamic states and pseudo elements for inline styles

Kevin: Sorry, I read that incorrectly.

---

It would be really nice to have an API in JS for programmatically
manipulating these element :states and :pseudo-elements as part of the
CSSOM.

Who is responsible for that?

On Thu, Nov 10, 2016 at 7:02 AM, Kevin Suttle <lists@kevin.suttle.email>
wrote:

> Sorry James. To be clear, I was agreeing with you. Pointing out the issue
> that we don't have proper scoping or namespacing, which is part of why
> inline styles are a necessity for component systems at times.
>
> *Kevin Suttle*
>
>
> ----- Original message -----
> From: James Kyle <me@thejameskyle.com>
> To: Kevin Suttle <lists@kevin.suttle.email>, Florian Rivoal <
> florian@rivoal.net>
> Cc: www-style@w3.org
> Subject: Re: dynamic states and pseudo elements for inline styles
> Date: Tue, 08 Nov 2016 18:46:16 +0000
>
> Hi Kevin and Florian,
>
> I want to push you a bit on this. The community is pushing new ideas and
> arguing for new best practices and I think they warrant attention.
>
> The idea that inline styles is a bad practice originates largely from a
> document-oriented way of thinking which has been adapted over time. However
> when working with an entirely component-based application, inline styles
> starts to make a lot of sense.
>
> Inside these components people arent writing:
>
> <span class="text-danger">...</span>
>
> They are writing:
>
> <Text variant="danger">...</Text>
>
> Everything that was once a class is now a component which exposes a
> minimal API which can be validated and is highly reusable.
>
> When you're only ever using a style on a single (reusable) element,
> stylesheets stop seeming necessary. And manually selecting elements out of
> a tree doesn't present a lot of compelling benefits, but many negatives.
>
> When this first came up is was fairly non-controversial in a community
> that has already been questioning accepted best practices. Since then,
> inline styles within component-based apps has spread wildly and is quickly
> becoming accepted as a new best practice.
>
> The only debate now is about the exact implementation of dynamic states,
> pseudo elements, and media queries. There have been a lot of different
> attempted solutions to this. Which is why I am now asking standards to
> produce this feature for the community to take advantage of.
>
> Providing tools that community wants to make them more successful seems
> like a worthwhile goal from any standards body.
>
> Thanks
> On Tue, Nov 8, 2016 at 7:06 AM Kevin Suttle <lists@kevin.suttle.email>
> wrote:
>
> > However, I feel that much of that inlining of styles is generally
> misguided, and isn't really something we should be encouraging.
>
> I would point to https://github.com/w3c/csswg-drafts/issues/270 to see
> what inline styles are trying to solve.
>
> *Kevin Suttle*
>
>
> ----- Original message -----
> From: Florian Rivoal <florian@rivoal.net>
> To: James Kyle <me@thejameskyle.com>
> Cc: www-style@w3.org
> Subject: Re: dynamic states and pseudo elements for inline styles
> Date: Tue, 8 Nov 2016 18:26:44 +0900
>
>
> On Nov 8, 2016, at 03:52, James Kyle <me@thejameskyle.com> wrote:
>
> Hello
>
> I would like to revive this draft
> <https://www.w3.org/TR/2002/WD-css-style-attr-20020515> from 2002, which
> adds the following syntax to style="...".
>
> <a href="http://www.w3.org/"
>           style="*{color: #900}*
>           *:link {background: #ff0}*
>           *:visited {background: #fff}*
>           *:hover {outline: thin red solid}*
>           *:active {background: #00f}*">...</a>
>
>
> This makes a lot of sense today due to a growing percentage of web
> developers writing styles inline rather than in separate stylesheets.
>
> - https://speakerdeck.com/vjeux/react-css-in-js
> - https://formidable.com/blog/2015/03/01/launching-radium/
> - https://docs.angularjs.org/api/ng/directive/ngStyle
> - https://github.com/smyte/jsxstyle
> - https://github.com/threepointone/glamor/blob/
> master/docs/createElement.md
>
> However, as you can see in some of those links there has been a lot of
> effort around making :states, ::pseudo elements, and @media queries work
> with inline styles.
>
> Most of these would be solved by that proposal (minus media queries -
> which are less of a concern)..
>
> Although I'd like to suggest the following changes:
>
> <a href="http://www.w3.org/"
>           style="*color: #900;*
>           *:link {background: #ff0};*
>           *:visited {background: #fff};*
>           *:hover {outline: thin red solid};*
>           *:active {background: #00f};*">...</a>
>
>
> - No curly { } braces around the existing inline styles - this prevents
> the browsers from rendering them today
> - A semicolon after { } blocks so that style="color: red; :hover {...};
> text-decoration: underline; works in browsers today.
>
>
> If we go that way, I agree with your suggested changes to the syntax for
> compatibility reasons. However, I feel that much of that inlining of styles
> is generally misguided, and isn't really something we should be encouraging.
>
>  - Florian
>
>
>