Re: dynamic states and pseudo elements for inline styles

> 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/ <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://speakerdeck.com/vjeux/react-css-in-js>
> - https://formidable.com/blog/2015/03/01/launching-radium/ <https://formidable.com/blog/2015/03/01/launching-radium/>
> - https://docs.angularjs.org/api/ng/directive/ngStyle <https://docs.angularjs.org/api/ng/directive/ngStyle>
> - https://github.com/smyte/jsxstyle <https://github.com/smyte/jsxstyle>
> - https://github.com/threepointone/glamor/blob/master/docs/createElement.md <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/ <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