flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: [FlexJS] className problem with MDL properties that modifies component className
Date Sun, 15 Jan 2017 08:02:34 GMT
On Jan 14, 2017 11:07 PM, "Alex Harui" <aharui@adobe.com> wrote:



On 1/14/17, 10:56 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>Thinking about this more, we could enclose components in a container div.
>The component would have the frozen styles and any classnames the user
>sets
>would would be on the parent div.  This way, due to the cascading nature
>of
>CSS, the component would get the appropriate styles while maintaining the
>frozen styles.
>
>For example, in FontAwesome, the current implementation is:
>
><fa:FontAwesomeIcon iconType="fa-twitter">
>becomes
><i class="fa fa-twitter">character_code</i>
>
>If user sets a classname property in mxml:
>
><fa:FontAwesomeIcon iconType="fa-twitter" className="myColor">
>becomes
><i class="myColor">character_code</i>
>
>unless we do a lot of internal class name maintenance.
>
>Instead, if we have the implementation as:
>
><div>
>    <i class="fa fa-twitter">character_code</i>
></div>
>
>Setting a class name could be done this way:
>
><div class="myColor">
>    <i class="fa fa-twitter">character_code</i>
></div>
>
>The <i> element would still inherit the myColor class and the component
>will not get modified externally.
>
>The only drawback is an additional <div> but I think that is acceptable.
>
>Thoughts?

I would not want to see Basic components wrapped in divs.  The MDL and FA
set can do that if they want.


Basic components dont have a preset notion of how they should look like.
My proposal is only for component sets like MDL or FontAwesome where there
are expectations on look and feel.


I guess I still don't understand why my
recommendation of an internal list like "typeNames" and "user" list like
className won't work.  What am I missing?


That should work as well.   But it sounds like more work.


One thing I want to point people to when considering FlexJS is that the
DOM looks like it would if you coded it without FlexJS.

  That makes us
compare better than having extra divs everywhere.


That is a good point.

I would also think
where folks use non-inheriting styles it wouldn't work that well?  And
would divs mess up some kinds of advanced CSS like sibling selectors?


Of course, I could be wrong...
-Alex



What I described is a pretty common way of doing things in the HTML world.
  But we dont necessarily need to do the same in FlexJS/MXML because we can
use JS to manipulate the CSS classes and abstract all that away from the
end user.

So, best to ignore my proposal.   Sorry for the noise 😊

Thanks,
Om

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message