Consistency between element classes, attributes and variables.

[gertcuykens]

This drives me nuts haha :p Who do I need to convince here that the mix between attributes and classes could be made a bit more consistent. Someone should sit down, make a list of all attributes and classes and make sure everybody is doing it the same way. Will this break everything? Yes but call it 0.6 i don't care, it should be ironed out. Restrict it to one way only, don't care which way just make it one way :)

https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

<core-header-panel>
  <div class="core-header">standard</div>
  <div class="content" fit>content fits 100% below the header</div>
</core-header-panel>

https://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar

<core-toolbar class="tall">
  <div id="progressBar" class="bottom fit"></div>
</core-toolbar>

https://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel

<core-scroll-header-panel>
  <core-toolbar>Header</core-toolbar>
  <div>Content goes here...</div>
</core-scroll-header-panel>

https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel

<core-drawer-panel rightDrawer>
  <div drawer> Drawer panel... </div>
  <div main> Main panel... </div>
</core-drawer-panel>

Many more examples, just want to make a point.

[gertcuykens]

This includes also variable names for example the use of g and globals I know both examples do completely separate things but in the end they are both global variables does not matter if the one is for style only, they both should use the name g or globals.

https://www.polymer-project.org/docs/polymer/polymer.html

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname">{{$.globals.firstName}}</div>
    <div id="lastname">{{$.globals.lastName}}</div>
  </template>
  <script>
    Polymer({
      ready: function() {
        console.log('Last name: ' + this.$.globals.lastName);
      }
    });
  </script>
</polymer-element>

https://www.polymer-project.org/docs/elements/core-elements.html#core-style

<core-style id="x-test">
  :host {
    background-color: {{g.myColor}};
  }
</core-style>
<script>
  CoreStyle.g.myColor = 'tomato';
</script>

[arthurevans]

Hi Gert,

Your point about the consistency is well taken. I'm collecting notes for a style guide, and I've made a note of these issues.

The core style one is a little bit different, I think. The "globals" example is just that -- a code example. You can use whatever ID you like for the element. The example uses the ID "globals" for clarity. In sample code, we frequently do things a little differently to make it easier to follow.

On the other hand, the core-style element has a property named g. I might argue that was an unfortunate name, but I think the engineers were trying to minimize typing for something that people might have to type a lot (which is not a consideration when writing sample code).

[gertcuykens]

Yes g is fine for me :) I just mention it as a precaution to make sure variable names across different elements being considered important too. I agree in this case it is not a problem. Thanks for looking into this, it makes writing code more fun if you can predict the attributes, classes and variables. Remembering things and reading documentation is not my strongest point :P

[gertcuykens]

Example of what I would think is maybe the most consistent?

<core-header-panel>
  <core-header>standard</core-header>
  <core-content fit>content fits 100% below the header</core-content>
</core-header-panel>

<core-toolbar class="tall">
  <span flex>Hello World</span>
  <div fit class="bottom" id="progressBar"></div>
</core-toolbar>

<core-scroll-header-panel>
  <core-toolbar>Header</core-toolbar>
  <core-content>Content goes here...</core-content>
</core-scroll-header-panel>

<core-drawer-panel rightDrawer>
  <core-drawer> Drawer panel... </core-drawer>
  <core-content> Main panel... </core-content>
</core-drawer-panel>

Basically avoid <div> at all cost and prefer attributes above classes

To indicate a custom element is for example <core-content> do something like this

<my-content is="core-content"> </my-content>

This is going to break so many peoples code lol, I may need witness protection :) But in the end everybody will be a happier polymer developer :)

[gertcuykens]

Also consider to make it a rule that you can swap out a component from a element more easily
example googlearchive/site-search#4

<site-search label="Search" canBeCondensed condensed>
   <core-icon-button icon="search"></core-icon-button>
</site-search>

[tjsavage]

Closing this issue due to age and the release of version 1 of Polymer - please feel free to re-open if this is incorrect.