Kunafa named styles and hash styles

Kuanfa provides an easy and convenient way for developers to write styles next to the element. It makes it easier to mentally map how the view will look and what style applies to what element. Ever tried to edit a CSS file with more than hundred thousands lines? Yeah! it sucks. However, not like writing styles inside HTML elements directly, Kunafa under the hood extracts the `style { }`  blocks into a CSS class.

So what’s the problem?

Well, everything works well and beautiful, except for one thing! Whenever style { }  is called, a new style will be created. That means if you have something like this:

 postsList.forEach {
                horizontalLayout { 
                    style { 
                        ...
                    }
                }
            }

Then for every post in postsList a new style will be created! If you are not careful, very soon you will find that thousands of classes are created that are no longer used and will only slow down your page.

Introducing..

Named styles

Named styles are an easy way to reuse styles. This way, styles created can be assigned a name like this.

 postsList.forEach {
                horizontalLayout { 
                    style("postRoot") { 
                        ...
                    }
                }
            }

The style is then saved with this name. Whenever the function style("postRoot") { }  is called aftwerwards, the stored style is returned instead of creating a new one. Keep in mind that the stored style is returned regardless of the body of the second call to style("postRoot"){} . This works perfectly for the loop case above, however it can lead to annoying bugs when the name is reused to completely different style bodies, as only the first call to the function will be saved, and subsequent call bodies will be ignored.

Hashed styles

Hashed styles are a special case of named styles, where instead of passing string as a name for the style, a hash for the style rule is calculated and saved as a name for the style. This has many benefits:

• The process is done automatically. In fact, starting from Kunafa 0.2.1, the function style {} by default is hashed.
• The order of the rules withing the style function is not important.

This is very useful and dramatically reduces the number of styles in the app. In face it can be more efficient than writing CSS by hand as all exactly similar styles, only one will be created and cached.

In special cases, this behavior might not be desirable. In this case, you can instruct the style function to hash and cache rule set (or use a cached rule set) as follows.

 postsList.forEach {
                horizontalLayout { 
                    style(shouldHash = false) { 
                        ...
                    }
                }
            }

Conclusion

Hashed styles can increase the performance of the web app without the need to separate the styles from the components they are applied to. It keeps everything concise without sacrificing the developer experience. Give it a try and let us know what you think.

Happy development. Also, don’t forget to join us at Slack here, and leave us a star in Github.