Re: dynamic states and pseudo elements for inline styles

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
>