Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Sharing CSS Between Polymer Components in Version 1.1 vs 0.5

DZone's Guide to

Sharing CSS Between Polymer Components in Version 1.1 vs 0.5

Other than some bad documentation, Polymer is a great tool for quickly building UIs without having to handle much of the model and controller details.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Finally figured out how to share styles between components in Polymer. In version 0.5 it was <core-style> and in 1.1, they’ve changed it to use shared styles, which is pretty easy to grok for someone who sucks at CSS like me.

Sadly, the 1.0 docs for Polymer are quite awful. Even more frustrating is most of the Google links still point to v0.5 content, including Github repos that don’t all point to the newer repos. For example, go figure out how to know how to programmatically listen when a <paper-radio-group> has changed a selected item by the user clicking it… ready, go. Oh look, you found misery! I reckon this is because they are still trying to keep ahead all of the Web vendor API changes, general code optimizations, and just resource issues. Not sure the size of the Polymer team. On a whim this morning I checked their blog and finally found what I was looking for since I gave up on the documentation (which was quite great in 0.5).

While I primarily work in raw JavaScript all day, and sometimes Angular, after messing with Polymer for about 2 weeks now, I really really don’t get the allure of React. When I was messing with Angular 2 months ago in Dart using the new component syntax, it was immediately apparent how quickly you could build UI’s. It felt like Flex. Just focusing strictly on the UI, not caring about models and controllers and blah blah blah MVC whatever. Just git-r-done.

Polymer feels the same way; I never messed with the Dart version so just doing the JavaScript version, but even so, it’s a ton like Angular 1.0, just less… weird. That, and you can include styles WITH your component vs. “Uh… Bootstrap will… like… handle that somehow. I don’t know man, go ask the designer, I’m just the coder.”

Took me a few weeks to get re-acclimated to Material Design. Bootstrap provides you with SO many components including general typography out of the box that work quite quickly, whereas Material Design, or even if you start with Material Design Lite, there’s still a ton of onus on you to have SOME designer chops, or have a designer as a friend that can help you.

Anyway, glad to know now how to make my CSS styles follow DRY principles.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
polymer.js ,flex ,material design ,react.js ,angularjs ,dart ,javascript

Published at DZone with permission of Jesse Warden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}