Re: dynamic states and pseudo elements for inline styles

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[1] 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


Links:

  1. https://www.w3.org/TR/2002/WD-css-style-attr-20020515