Lessons Learned:
Styling Kendo UI

Alex Gyoshev
@agyoshev

A little context

SASS themes

Summary

Problem
Solution
Lesson

Problem
Solution
Lesson

Problem
Solution
Lesson

Problem:
Use Theme Colors in JS

Case Study:
Styling Charts

How do you encode data in CSS to be read by JS?

In-depth study: Encoding Data in CSS

Modern Solution:

CSS Custom Properties

Great, but... IE

// Encoded in CSS
:root {
  --accent-bg: #f11f11;
  --border-radius: 2px;
  --opacity: 0.2;
}

// Read in JS
const styles = getComputedStyle(document.documentElement);
const accentBg = styles.getPropertyValue('--accent-bg');

Solution: JSON-in-CSS

Take that, CSS-in-JS!

// Encoded in CSS
#variable-info::after {
   display: none;
   content: '{
     "accent-bg": "#f11f11",
     "border-radius": "2px",
     "chart-opacity": 0.2
   }';
}

// Read in JS (excuse my jQuery)
const element   = $("<div id='variable-info' />").appendTo("body");
const content   = window.getComputedStyle(element, '::after').content;
const variables = JSON.parse(JSON.parse(content));

Lesson Learned

Aim for a single source of truth

Easy for developers, internally and externally:
"Style charts like all other components"

Problem:
Dependencies

Case Study:
Prune styles for unused components

Possible Solution:
CSS Modules

Great for some use cases, but...

- requires overhaul of older systems

- limits availability of workarounds

CSS
Modules

Solution:
SASS Modules

// grid.scss
@import "button";
@import "dropdown";

// `only-once` mixin outputs content only once
@include only-once('grid') {
    .grid {
        // styles
    }
}

// user code
@import "grid"

See Managing Dependencies in SASS

Lesson Learned

Get inspired from other solutions

...and don't be afraid to build your own

Problem:
Regressions

:(

Solution:
Code Reviews

Let's us be wrong together

Solution:
Custom lint rules

Automated nitpicking

Solution:
Custom lint rules

$foo: 100%;
$bar: 10px;

calc( $foo - $bar )
-> calc( 90px )

calc( #{ $foo } - #{ $bar } )
-> calc( 100% - 10px)

Solution:
Visual Tests

Before

After

Great support in Github/Gitlab

Solution:
Visual Tests

Developer

CI

Reviewer

commits screenshots

gives feedback

commits code

Solution:
Visual Tests

Beneficial side effect:
"blessed" rendering
(platform-agnostic)

Lesson Learned

Use short feedback loops

-CSS can be tested, too

-Automate verification

Lessons Learned

Use a single source of truth

Get inspired by other solutions

Use short feedback loops

CSS is code, too

Same same, but different

Thank you!

Alex Gyoshev
@agyoshev
slides.com/gyoshev/styling-kendo-ui

Made with Slides.com