search

nathanmarks / jss-theme-reactor

NOT MAINTAINED Powerful theming layer for use with the jss CSS in JS library
MIT License
64 stars 6 forks source link

Hash name length #21

Open rosskevin opened 7 years ago

rosskevin commented 7 years ago

The hashes are quite long for class names and can really add up when inspecting elements to figure out adjustments.

For example - checkout the length of the layout (granted I have specified a lot of props):

<div class="Layout-typeContainer-3240965036 Layout-direction-xs-column-3537327873 Layout-align-xs-center-1698959009 Layout-justify-xs-space-between-103446747 ui-Layout-Container-root-2335400088 ui-person-ViewContact-media-1692710983">
    <div class="Layout-typeItem-565831246 Layout-grid-xs-800592039">
        <div class="ui-Icon-Gravatar-div-259243726"><i class="material-icons ui-Icon-icon-370879474" title="Bob Kelso">person</i>
        </div>
    </div>
    <h2 class="Text-text-233331062 Text-display1-1862278092 Text-colorInherit-1808780954 ui-person-ViewContact-name-2999585750">
        Bob Kelso</h2>
</div>

Instead of generating hashes, how about keeping a global key map based on the prefix and just incrementing the number as needed e.g. Layout-typeContainer-1 and Layout-typeContainer-2?

As I understand it, we already must ensure that our prefix is unique otherwise we will overwrite other styles, or has this changed?

nathanmarks commented 7 years ago

@rosskevin I've found they are quite long too. I think this would be a good move.

In most situations, the className is going to be unique even without the hash.

Do you think we should continue to prepend both the sheet and rule name in dev or do you think it ever gets too verbose?

We should also do something different in prod -- perhaps just a hash and nothing else.

rosskevin commented 7 years ago
  1. I like the sheet-rule naming in dev (but kill the unique number if possible). I can also control it if I really want to (at least in my own code), but the descriptive nature is a plus.
  2. just a hash in prod sounds fine to me.

While we are in this area, I find myself prefixing everything in our libraries just to be sure there is no conflict with material-ui. Any thoughts about plugging in a naming strategy for this or allowing prefix/suffix?