diff --git a/examples/stocks-fn/stockarrow.dart b/examples/stocks-fn/stockarrow.dart
index 63cebf5502f2e4cd7bb95868459b8d86e2239ace..82e52815d2ea57b1d7763f6a0a54933d5c15e9cb 100644
--- a/examples/stocks-fn/stockarrow.dart
+++ b/examples/stocks-fn/stockarrow.dart
@@ -74,11 +74,11 @@ class StockArrow extends Component {
 
     return new Container(
       inlineStyle: 'border-color: $border',
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
           inlineStyle: 'border-$type-color: $border',
-          styles: [up ? _upStyle : _downStyle]
+          style: up ? _upStyle : _downStyle
         )
       ]
     );
diff --git a/examples/stocks-fn/stockrow.dart b/examples/stocks-fn/stockrow.dart
index cacb3c0d891661e9029333df4f9d7fd2dcdadd7a..6eb9df648039df1e2b1914a16fdf5e35798ebe74 100644
--- a/examples/stocks-fn/stockrow.dart
+++ b/examples/stocks-fn/stockrow.dart
@@ -47,23 +47,23 @@ class StockRow extends Component {
       ),
       new Container(
         key: 'Ticker',
-        styles: [_tickerStyle],
+        style: _tickerStyle,
         children: [new Text(stock.symbol)]
       ),
       new Container(
         key: 'LastSale',
-        styles: [_lastSaleStyle],
+        style: _lastSaleStyle,
         children: [new Text(lastSale)]
       ),
       new Container(
         key: 'Change',
-        styles: [_changeStyle],
+        style: _changeStyle,
         children: [new Text(changeInPrice)]
       )
     ];
 
     return new Material(
-      styles: [_style],
+      style: _style,
       children: children
     );
   }
diff --git a/examples/stocks-fn/stocksapp.dart b/examples/stocks-fn/stocksapp.dart
index c35983ea9efce93a9f4468ff4162026e40976773..e303fbe26ca9e7752b7832796dda38a6ce01d1fa 100644
--- a/examples/stocks-fn/stocksapp.dart
+++ b/examples/stocks-fn/stocksapp.dart
@@ -105,19 +105,19 @@ class StocksApp extends App {
 
     var toolbar = new Toolbar(
       children: [
-        new Icon(key: 'menu', styles: [_iconStyle],
+        new Icon(key: 'menu', style: _iconStyle,
             size: 24,
             type: 'navigation/menu_white')
           ..events.listen('click', _drawerAnimation.toggle),
         new Container(
-          styles: [_titleStyle],
+          style: _titleStyle,
           children: [title]
         ),
-        new Icon(key: 'search', styles: [_iconStyle],
+        new Icon(key: 'search', style: _iconStyle,
             size: 24,
             type: 'action/search_white')
           ..events.listen('click', _handleSearchClick),
-        new Icon(key: 'more_white', styles: [_iconStyle],
+        new Icon(key: 'more_white', style: _iconStyle,
             size: 24,
             type: 'navigation/more_vert_white')
       ]
@@ -133,7 +133,7 @@ class StocksApp extends App {
       children: [
         new Container(
           key: 'Content',
-          styles: [_style],
+          style: _style,
           children: [toolbar, list]
         ),
         fab,
diff --git a/framework/components/button.dart b/framework/components/button.dart
index 9f6ceadf87a820e08f21d1382957089bac52bba0..0a80bbad1ae7f1bf60e9bf84ac04a6f3d0d30d00 100644
--- a/framework/components/button.dart
+++ b/framework/components/button.dart
@@ -26,7 +26,7 @@ class Button extends Component {
 
   Node build() {
     return new Material(
-      styles: [_style],
+      style: _style,
       children: [content],
       level: level
     );
diff --git a/framework/components/checkbox.dart b/framework/components/checkbox.dart
index 64e9d748ae52c142cb22b8172b94c2be85b7179f..bc7e14a2bede5f9e4d04836443e31b74b5ef5be6 100644
--- a/framework/components/checkbox.dart
+++ b/framework/components/checkbox.dart
@@ -68,13 +68,13 @@ class Checkbox extends ButtonBase {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
-          styles: [highlight ? _containerHighlightStyle : _containerStyle],
+          style: highlight ? _containerHighlightStyle : _containerStyle,
           children: [
             new Container(
-              styles: [checked ? _checkedStyle : _uncheckedStyle]
+              style: checked ? _checkedStyle : _uncheckedStyle
             )
           ]
         )
diff --git a/framework/components/drawer.dart b/framework/components/drawer.dart
index 6c792ccc283b7c142ac532b5b1e3b02022e91983..e2cfc99a9952a0d8fea9568f5a929649397346f7 100644
--- a/framework/components/drawer.dart
+++ b/framework/components/drawer.dart
@@ -150,21 +150,21 @@ class Drawer extends Component {
 
     Container mask = new Container(
       key: 'Mask',
-      styles: [_maskStyle],
+      style: _maskStyle,
       inlineStyle: maskInlineStyle
     )..events.listen('gesturetap', animation.handleMaskTap)
      ..events.listen('gestureflingstart', animation.handleFlingStart);
 
     Material content = new Material(
       key: 'Content',
-      styles: [_contentStyle],
+      style: _contentStyle,
       inlineStyle: contentInlineStyle,
       children: children,
       level: level
     );
 
     return new Container(
-      styles: [_style],
+      style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
     );
diff --git a/framework/components/drawer_header.dart b/framework/components/drawer_header.dart
index 028792e8ed01f54a92b47ff4242c54aa470e6348..91bb2cf6d0c2ae112501de293acbca672c52968c 100644
--- a/framework/components/drawer_header.dart
+++ b/framework/components/drawer_header.dart
@@ -33,15 +33,15 @@ class DrawerHeader extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
           key: 'Spacer',
-          styles: [_spacerStyle]
+          style: _spacerStyle
         ),
         new Container(
           key: 'Label',
-          styles: [_labelStyle],
+          style: _labelStyle,
           children: children
         )
       ]
diff --git a/framework/components/fixed_height_scrollable.dart b/framework/components/fixed_height_scrollable.dart
index 6e1605c2e32715dfc457c17a23ab2f49216c75ff..5ccaa230562b720730120d3932c0f2ec1e1431d1 100644
--- a/framework/components/fixed_height_scrollable.dart
+++ b/framework/components/fixed_height_scrollable.dart
@@ -74,10 +74,10 @@ abstract class FixedHeightScrollable extends Scrollable {
     }
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
-          styles: [_scrollAreaStyle],
+          style: _scrollAreaStyle,
           inlineStyle: transformStyle,
           children: buildItems(itemNumber, drawCount)
         )
diff --git a/framework/components/floating_action_button.dart b/framework/components/floating_action_button.dart
index 1752710cdc3f4c2375119ee0aaeb648b9db2f455..93fd61b50be6bac37ffdefb962a14b22c0ea5278 100644
--- a/framework/components/floating_action_button.dart
+++ b/framework/components/floating_action_button.dart
@@ -43,17 +43,13 @@ class FloatingActionButton extends Component {
     if (content != null)
       children.add(content);
 
-    List<Style> containerStyle = [_style];
-    if (level > 0)
-      containerStyle.add(Material.shadowStyle[level]);
-
     return new Container(
       key: "Container",
-      styles: containerStyle,
+      style: level > 0 ? _style.extend(Material.shadowStyle[level]) : _style,
       children: [
         new Material(
           key: "Clip",
-          styles: [_clipStyle],
+          style: _clipStyle,
           children: children
         )
       ]
diff --git a/framework/components/icon.dart b/framework/components/icon.dart
index 3b0f9d0fbeb71a6cb8eaea915efbc0ba697ea13d..4a37c7876511376df7a95da6be7dc1733e4ad71b 100644
--- a/framework/components/icon.dart
+++ b/framework/components/icon.dart
@@ -7,13 +7,13 @@ import '../fn.dart';
 const String kAssetBase = '/sky/assets/material-design-icons';
 
 class Icon extends Component {
-  List<Style> styles;
+  Style style;
   int size;
   String type;
 
   Icon({
     String key,
-    this.styles,
+    this.style,
     this.size,
     this.type: ''
   }) : super(key: key);
@@ -28,7 +28,7 @@ class Icon extends Component {
     }
 
     return new Image(
-      styles: styles,
+      style: style,
       width: size,
       height: size,
       src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png'
diff --git a/framework/components/ink_splash.dart b/framework/components/ink_splash.dart
index ece70a160acf1a24236162cd34879526a763a168..8e3e9068af896bc577b9a293ae46512d43eaf042 100644
--- a/framework/components/ink_splash.dart
+++ b/framework/components/ink_splash.dart
@@ -94,11 +94,11 @@ class InkSplash extends Component {
     _ensureListening();
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: [
         new Container(
           inlineStyle: _inlineStyle,
-          styles: [_splashStyle]
+          style: _splashStyle
         )
       ]
     );
diff --git a/framework/components/input.dart b/framework/components/input.dart
index 6ab0cd7dbe9369d177359613be8ca4637d9abd3f..f264b4a4d88589bfbbfc464c1dc1551f7b0e0c19 100644
--- a/framework/components/input.dart
+++ b/framework/components/input.dart
@@ -75,7 +75,7 @@ class Input extends Component {
 
     if (placeholder != null && _value.isEmpty) {
       children.add(new Container(
-          styles: [_placeholderStyle],
+          style: _placeholderStyle,
           children: [new Text(placeholder)]
       ));
     }
@@ -83,7 +83,7 @@ class Input extends Component {
     children.add(new EditableText(value: _editableValue, focused: focused));
 
     return new Container(
-      styles: [_style],
+      style: _style,
       inlineStyle: focused ? _focusedInlineStyle : null,
       children: children
     );
diff --git a/framework/components/material.dart b/framework/components/material.dart
index 1a58f06034e426c6ca98bf7d0b1e91053627f47d..8b6177938ce9dc920b2d6889208535ae1032d133 100644
--- a/framework/components/material.dart
+++ b/framework/components/material.dart
@@ -29,14 +29,14 @@ class Material extends Component {
 
   LinkedHashSet<SplashAnimation> _splashes;
 
-  List<Style> styles;
+  Style style;
   String inlineStyle;
   List<Node> children;
   int level;
 
   Material({
       Object key,
-      this.styles,
+      this.style,
       this.inlineStyle,
       this.children,
       this.level: 0 }) : super(key: key) {
@@ -50,7 +50,7 @@ class Material extends Component {
 
     if (_splashes != null) {
       childrenIncludingSplashes.add(new Container(
-        styles: [_splashesStyle],
+        style: _splashesStyle,
         children: new List.from(_splashes.map(
             (s) => new InkSplash(s.onStyleChanged))),
         key: 'Splashes'
@@ -60,14 +60,12 @@ class Material extends Component {
     if (children != null)
       childrenIncludingSplashes.addAll(children);
 
-    List<Style> stylesIncludingShadow = styles;
-    if (level > 0) {
-      stylesIncludingShadow = new List.from(styles);
-      stylesIncludingShadow.add(shadowStyle[level]);
-    }
-
-    return new Container(key: 'Material', styles: stylesIncludingShadow,
-        inlineStyle: inlineStyle, children: childrenIncludingSplashes);
+    return new Container(
+        key: 'Material',
+        style: level > 0 ? style.extend(shadowStyle[level]) : style,
+        inlineStyle: inlineStyle,
+        children: childrenIncludingSplashes
+    );
   }
 
   sky.ClientRect _getBoundingRect() => (getRoot() as sky.Element).getBoundingClientRect();
diff --git a/framework/components/menu_divider.dart b/framework/components/menu_divider.dart
index 421c9a747dff7ab26b8d3b55c2fdcaf514b8cade..46edf36e6a8a997376a275b397476a5acd59345c 100644
--- a/framework/components/menu_divider.dart
+++ b/framework/components/menu_divider.dart
@@ -14,7 +14,7 @@ class MenuDivider extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style]
+      style: _style
     );
   }
 }
diff --git a/framework/components/menu_item.dart b/framework/components/menu_item.dart
index fbbde9d5961ae8fe01fb1ffb972afa5fb909b946..4db0d001656a922c123985012f13ccbf6cc7dd44 100644
--- a/framework/components/menu_item.dart
+++ b/framework/components/menu_item.dart
@@ -43,15 +43,15 @@ class MenuItem extends ButtonBase {
 
   Node build() {
     return new Material (
-      styles: [highlight ? _highlightStyle : _style],
+      style: highlight ? _highlightStyle : _style,
       children: [
         new Icon(
-          styles: [_iconStyle],
+          style: _iconStyle,
           size: 24,
           type: "${icon}_grey600"
         ),
         new Container(
-          styles: [_labelStyle],
+          style: _labelStyle,
           children: children
         )
       ]
diff --git a/framework/components/radio.dart b/framework/components/radio.dart
index edc79374665f4290bf2eae4debaf9bad50fc6ba7..e94cf9f9541ced4ce38833c006aa9fa131b2f156 100644
--- a/framework/components/radio.dart
+++ b/framework/components/radio.dart
@@ -56,8 +56,8 @@ class Radio extends ButtonBase {
 
   Node build() {
     return new Material(
-      styles: [highlight ? _highlightStyle : _style],
-      children: value == groupValue ? [new Container(styles: [_dotStyle] )] : []
+      style: highlight ? _highlightStyle : _style,
+      children: value == groupValue ? [new Container(style: _dotStyle )] : []
     );
   }
 
diff --git a/framework/components/toolbar.dart b/framework/components/toolbar.dart
index eefad4e61cff81c4995ac290f2b6b68a829358f2..23040bd3b55f8218bdfe3e08a6b01ce6ec18ee37 100644
--- a/framework/components/toolbar.dart
+++ b/framework/components/toolbar.dart
@@ -23,7 +23,7 @@ class Toolbar extends Component {
 
   Node build() {
     return new Container(
-      styles: [_style],
+      style: _style,
       children: children
     );
   }
diff --git a/framework/editing/editable_text.dart b/framework/editing/editable_text.dart
index df73e46262334c72669827fe82d9bf4fdf3b6904..5a0b0810d10c24e941dbb125997529d067995d87 100644
--- a/framework/editing/editable_text.dart
+++ b/framework/editing/editable_text.dart
@@ -75,8 +75,8 @@ class EditableText extends Component {
       String composing = value.textInside(value.composing);
       if (!composing.isEmpty) {
         children.add(new Container(
-          key: 'composing', 
-          styles: [_composingStyle],
+          key: 'composing',
+          style: _composingStyle,
           children: [new Text(composing)]
         ));
       }
@@ -87,10 +87,10 @@ class EditableText extends Component {
     }
 
     if (_showCursor)
-      children.add(new Container(key: 'cursor', styles: [_cusorStyle]));
+      children.add(new Container(key: 'cursor', style: _cusorStyle));
 
     return new Container(
-      styles: [_style],
+      style: _style,
       children: children
     );
   }
diff --git a/framework/fn.dart b/framework/fn.dart
index 12bcb888f4cf2b0d6c7c850c218830d8bf0a17c1..6b5630882e57eb27ea393829cfa58df1a7a760d5 100644
--- a/framework/fn.dart
+++ b/framework/fn.dart
@@ -46,23 +46,25 @@ class Style {
   final String _className;
   static final Map<String, Style> _cache = new HashMap<String, Style>();
 
-  static int nextStyleId = 1;
+  static int _nextStyleId = 1;
 
-  static String nextClassName(String styles) {
-    assert(sky.document != null);
-    String className = "style$nextStyleId";
-    nextStyleId++;
+  static String _getNextClassName() { return "style${_nextStyleId++}"; }
 
-    sky.Element styleNode = sky.document.createElement('style');
-    styleNode.setChild(new sky.Text(".$className { $styles }"));
-    sky.document.appendChild(styleNode);
+  Style extend(Style other) {
+    var className = "$_className ${other._className}";
 
-    return className;
+    return _cache.putIfAbsent(className, () {
+      return new Style._internal(className);
+    });
   }
 
   factory Style(String styles) {
     return _cache.putIfAbsent(styles, () {
-      return new Style._internal(nextClassName(styles));
+      var className = _getNextClassName();
+      sky.Element styleNode = sky.document.createElement('style');
+      styleNode.setChild(new sky.Text(".$className { $styles }"));
+      sky.document.appendChild(styleNode);
+      return new Style._internal(className);
     });
   }
 
@@ -140,11 +142,11 @@ abstract class Element extends Node {
   Element({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
 
     this.inlineStyle
   }) : super(key:key) {
-    _class = styles == null ? '' : styles.map((s) => s._className).join(' ');
+    _class = style == null ? '' : style._className;
     _children = children == null ? _emptyList : children;
 
     if (_isInCheckedMode) {
@@ -412,12 +414,12 @@ class Container extends Element {
   Container({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );
 }
@@ -436,7 +438,7 @@ class Image extends Element {
   Image({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle,
     this.width,
     this.height,
@@ -444,7 +446,7 @@ class Image extends Element {
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );
 
@@ -480,7 +482,7 @@ class Anchor extends Element {
   Anchor({
     Object key,
     List<Node> children,
-    List<Style> styles,
+    Style style,
     String inlineStyle,
     this.width,
     this.height,
@@ -488,7 +490,7 @@ class Anchor extends Element {
   }) : super(
     key: key,
     children: children,
-    styles: styles,
+    style: style,
     inlineStyle: inlineStyle
   );