Over a million developers have joined DZone.

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

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

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.

Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.

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

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}