diff --git a/examples/window-scale/src/main.rs b/examples/window-scale/src/main.rs
index 791ca25f..b23da48c 100644
--- a/examples/window-scale/src/main.rs
+++ b/examples/window-scale/src/main.rs
@@ -3,11 +3,14 @@ use floem::{
     keyboard::{Key, NamedKey},
     peniko::Color,
     reactive::{create_rw_signal, create_signal},
+    style_class,
     unit::UnitExt,
     view::View,
     views::{label, stack, Decorators},
 };
 
+style_class!(pub Button);
+
 fn app_view() -> impl View {
     let (counter, set_counter) = create_signal(0);
     let window_scale = create_rw_signal(1.0);
@@ -16,35 +19,26 @@ fn app_view() -> impl View {
         stack({
             (
                 label(|| "Increment")
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
-                            .hover(|s| s.background(Color::LIGHT_GREEN))
-                            .active(|s| s.color(Color::WHITE).background(Color::DARK_GREEN))
-                    })
+                    .class(Button)
                     .on_click(move |_| {
                         set_counter.update(|value| *value += 1);
                         true
                     })
                     .keyboard_navigatable(),
                 label(|| "Decrement")
+                    .class(Button)
                     .on_click(move |_| {
                         set_counter.update(|value| *value -= 1);
                         true
                     })
                     .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .margin_left(10.0)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
+                        s.margin_left(10.0)
                             .hover(|s| s.background(Color::rgb8(244, 67, 54)))
-                            .active(|s| s.color(Color::WHITE).background(Color::RED))
+                            .active(|s| s.background(Color::RED))
                     })
                     .keyboard_navigatable(),
                 label(|| "Reset to 0")
+                    .class(Button)
                     .on_click(move |_| {
                         println!("Reset counter pressed"); // will not fire if button is disabled
                         set_counter.update(|value| *value = 0);
@@ -52,15 +46,10 @@ fn app_view() -> impl View {
                     })
                     .disabled(move || counter.get() == 0)
                     .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .margin_left(10.0)
+                        s.margin_left(10.0)
                             .background(Color::LIGHT_BLUE)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
-                            .disabled(|s| s.background(Color::LIGHT_GRAY))
                             .hover(|s| s.background(Color::LIGHT_YELLOW))
-                            .active(|s| s.color(Color::WHITE).background(Color::YELLOW_GREEN))
+                            .active(|s| s.background(Color::YELLOW_GREEN))
                     })
                     .keyboard_navigatable(),
             )
@@ -68,46 +57,27 @@ fn app_view() -> impl View {
         stack({
             (
                 label(|| "Zoom In")
+                    .class(Button)
                     .on_click(move |_| {
                         window_scale.update(|scale| *scale *= 1.2);
                         true
                     })
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .margin_top(10.0)
-                            .margin_right(10.0)
-                            .padding(10.0)
-                            .hover(|s| s.background(Color::LIGHT_GREEN))
-                    }),
+                    .style(|s| s.margin_top(10.0).margin_right(10.0)),
                 label(|| "Zoom Out")
+                    .class(Button)
                     .on_click(move |_| {
                         window_scale.update(|scale| *scale /= 1.2);
                         true
                     })
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .margin_top(10.0)
-                            .margin_right(10.0)
-                            .padding(10.0)
-                            .hover(|s| s.background(Color::LIGHT_GREEN))
-                    }),
+                    .style(|s| s.margin_top(10.0).margin_right(10.0)),
                 label(|| "Zoom Reset")
+                    .class(Button)
                     .disabled(move || window_scale.get() == 1.0)
                     .on_click(move |_| {
                         window_scale.set(1.0);
                         true
                     })
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .margin_top(10.0)
-                            .margin_right(10.0)
-                            .padding(10.0)
-                            .hover(|s| s.background(Color::LIGHT_GREEN))
-                            .disabled(|s| s.background(Color::LIGHT_GRAY))
-                    }),
+                    .style(|s| s.margin_top(10.0).margin_right(10.0)),
             )
         })
         .style(|s| {
@@ -123,6 +93,15 @@ fn app_view() -> impl View {
             .flex_col()
             .items_center()
             .justify_center()
+            .class(Button, |s| {
+                s.border(1.0)
+                    .border_radius(10.0)
+                    .padding(10.0)
+                    .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
+                    .disabled(|s| s.background(Color::LIGHT_GRAY))
+                    .hover(|s| s.background(Color::LIGHT_GREEN))
+                    .active(|s| s.color(Color::WHITE).background(Color::DARK_GREEN))
+            })
     });
 
     let id = view.id();
diff --git a/src/context.rs b/src/context.rs
index 90aeac00..85d987dc 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -26,8 +26,8 @@ use crate::{
     pointer::PointerInputEvent,
     responsive::{GridBreakpoints, ScreenSizeBp},
     style::{
-        BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleProp, StyleSelector,
-        StyleSelectors,
+        BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleClassRef, StyleProp,
+        StyleSelector, StyleSelectors,
     },
     unit::PxPct,
 };
@@ -58,6 +58,7 @@ pub struct ViewState {
     pub(crate) animation: Option<Animation>,
     pub(crate) base_style: Option<Style>,
     pub(crate) style: Style,
+    pub(crate) class: Option<StyleClassRef>,
     pub(crate) dragging_style: Option<Style>,
     pub(crate) combined_style: Style,
     pub(crate) event_listeners: HashMap<EventListener, Box<EventCallback>>,
@@ -81,6 +82,7 @@ impl ViewState {
             animation: None,
             base_style: None,
             style: Style::new(),
+            class: None,
             combined_style: Style::new(),
             dragging_style: None,
             children_nodes: Vec::new(),
@@ -99,18 +101,23 @@ impl ViewState {
         view_style: Option<Style>,
         interact_state: InteractionState,
         screen_size_bp: ScreenSizeBp,
+        view_class: Option<StyleClassRef>,
+        classes: &[StyleClassRef],
+        context: &Style,
     ) {
-        let mut computed_style = if let Some(view_style) = view_style {
-            if let Some(base_style) = self.base_style.clone() {
-                view_style.apply(base_style).apply(self.style.clone())
-            } else {
-                view_style.apply(self.style.clone())
-            }
-        } else if let Some(base_style) = self.base_style.clone() {
-            base_style.apply(self.style.clone())
-        } else {
-            self.style.clone()
-        };
+        let mut computed_style = Style::new();
+        if let Some(view_style) = view_style {
+            computed_style.apply_mut(view_style);
+        }
+        if let Some(view_class) = view_class {
+            computed_style = computed_style.apply_classes_from_context(&[view_class], context);
+        }
+        if let Some(base_style) = self.base_style.clone() {
+            computed_style.apply_mut(base_style);
+        }
+        computed_style = computed_style
+            .apply_classes_from_context(classes, context)
+            .apply(self.style.clone());
 
         'anim: {
             if let Some(animation) = self.animation.as_mut() {
@@ -321,11 +328,25 @@ impl AppState {
         self.compute_layout();
     }
 
-    pub(crate) fn compute_style(&mut self, id: Id, view_style: Option<Style>) {
+    pub(crate) fn compute_style(
+        &mut self,
+        id: Id,
+        view_style: Option<Style>,
+        view_class: Option<StyleClassRef>,
+        classes: &[StyleClassRef],
+        context: &Style,
+    ) {
         let interact_state = self.get_interact_state(&id);
         let screen_size_bp = self.screen_size_bp;
         let view_state = self.view_state(id);
-        view_state.compute_style(view_style, interact_state, screen_size_bp);
+        view_state.compute_style(
+            view_style,
+            interact_state,
+            screen_size_bp,
+            view_class,
+            classes,
+            context,
+        );
     }
 
     pub(crate) fn get_computed_style(&mut self, id: Id) -> &Style {
@@ -651,7 +672,7 @@ impl StyleCx {
 /// Holds current layout state for given position in the tree.
 /// You'll use this in the `View::layout` implementation to call `layout_node` on children and to access any font
 pub struct LayoutCx<'a> {
-    app_state: &'a mut AppState,
+    pub(crate) app_state: &'a mut AppState,
     pub(crate) viewport: Option<Rect>,
     pub(crate) style: StyleCx,
     pub(crate) window_origin: Point,
@@ -678,6 +699,12 @@ impl<'a> LayoutCx<'a> {
             .or_else(|| self.style.current.get_prop::<P>())
     }
 
+    pub fn style(&self) -> Style {
+        (*self.style.current)
+            .clone()
+            .apply(self.style.direct.clone())
+    }
+
     pub(crate) fn clear(&mut self) {
         self.style.clear();
         self.viewport = None;
diff --git a/src/id.rs b/src/id.rs
index de6582b5..dced04d9 100644
--- a/src/id.rs
+++ b/src/id.rs
@@ -16,7 +16,7 @@ use crate::{
     animate::Animation,
     context::{EventCallback, MenuCallback, ResizeCallback},
     event::EventListener,
-    style::{Style, StyleSelector},
+    style::{Style, StyleClassRef, StyleSelector},
     update::{UpdateMessage, CENTRAL_DEFERRED_UPDATE_MESSAGES, CENTRAL_UPDATE_MESSAGES},
 };
 
@@ -154,6 +154,10 @@ impl Id {
         self.add_update_message(UpdateMessage::Style { id: *self, style });
     }
 
+    pub fn update_class(&self, class: StyleClassRef) {
+        self.add_update_message(UpdateMessage::Class { id: *self, class });
+    }
+
     pub(crate) fn update_style_selector(&self, style: Style, selector: StyleSelector) {
         self.add_update_message(UpdateMessage::StyleSelector {
             id: *self,
diff --git a/src/inspector.rs b/src/inspector.rs
index 364d7cb8..0117f7e8 100644
--- a/src/inspector.rs
+++ b/src/inspector.rs
@@ -539,13 +539,17 @@ fn inspector_view(capture: &Option<Rc<Capture>>) -> impl View {
                 .width_full()
                 .height_full()
                 .background(Color::WHITE)
-                .set(scroll::Thickness, 16.0)
-                .set(scroll::Rounded, false)
-                .set(scroll::HandleRadius, 4.0)
-                .set(scroll::HandleColor, Color::rgba8(166, 166, 166, 140))
-                .set(scroll::DragColor, Color::rgb8(166, 166, 166))
-                .set(scroll::HoverColor, Color::rgb8(184, 184, 184))
-                .set(scroll::BgActiveColor, Color::rgba8(166, 166, 166, 30))
+                .class(scroll::Handle, |s| {
+                    s.border_radius(4.0)
+                        .background(Color::rgba8(166, 166, 166, 140))
+                        .set(scroll::Thickness, 16.0)
+                        .set(scroll::Rounded, false)
+                        .active(|s| s.background(Color::rgb8(166, 166, 166)))
+                        .hover(|s| s.background(Color::rgb8(184, 184, 184)))
+                })
+                .class(scroll::Track, |s| {
+                    s.hover(|s| s.background(Color::rgba8(166, 166, 166, 30)))
+                })
         })
 }
 
diff --git a/src/style.rs b/src/style.rs
index c78fc951..4d9766df 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -128,6 +128,58 @@ impl StylePropValue for Color {
     }
 }
 
+pub trait StyleClass: Default + Copy + 'static {
+    fn class_ref() -> StyleClassRef;
+}
+
+#[derive(Debug)]
+pub struct StyleClassInfo {
+    pub(crate) name: fn() -> &'static str,
+}
+
+impl StyleClassInfo {
+    pub const fn new<Name>() -> Self {
+        StyleClassInfo {
+            name: || std::any::type_name::<Name>(),
+        }
+    }
+}
+
+#[derive(Copy, Clone)]
+pub struct StyleClassRef {
+    pub info: &'static StyleClassInfo,
+}
+impl PartialEq for StyleClassRef {
+    fn eq(&self, other: &Self) -> bool {
+        ptr::eq(self.info, other.info)
+    }
+}
+impl Hash for StyleClassRef {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        state.write_usize(self.info as *const _ as usize)
+    }
+}
+impl Eq for StyleClassRef {}
+impl Debug for StyleClassRef {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", (self.info.name)())
+    }
+}
+
+#[macro_export]
+macro_rules! style_class {
+    ($v:vis $name:ident) => {
+        #[derive(Default, Copy, Clone)]
+        $v struct $name;
+        impl $crate::style::StyleClass for $name {
+            fn class_ref() -> $crate::style::StyleClassRef {
+                static INFO: $crate::style::StyleClassInfo = $crate::style::StyleClassInfo::new::<$name>();
+                $crate::style::StyleClassRef { info: &INFO }
+            }
+        }
+    };
+}
+
 pub trait StyleProp: Default + Copy + 'static {
     type Type: StylePropValue;
     fn prop_ref() -> StylePropRef;
@@ -207,6 +259,10 @@ pub trait StylePropReader {
     /// Returns true if the property changed.
     fn read(state: &mut Self::State, cx: &LayoutCx) -> bool;
 
+    /// Reads the property from the style.
+    /// Returns true if the property changed.
+    fn read_style(state: &mut Self::State, style: &Style) -> bool;
+
     fn get(state: &Self::State) -> Self::Type;
     fn new() -> Self::State;
 }
@@ -222,6 +278,12 @@ impl<P: StyleProp> StylePropReader for P {
         *state = new;
         changed
     }
+    fn read_style(state: &mut Self::State, style: &Style) -> bool {
+        let new = style.get_prop_or_default::<P>();
+        let changed = new != *state;
+        *state = new;
+        changed
+    }
     fn get(state: &Self::State) -> Self::Type {
         state.clone()
     }
@@ -239,6 +301,12 @@ impl<P: StyleProp> StylePropReader for Option<P> {
         *state = new;
         changed
     }
+    fn read_style(state: &mut Self::State, style: &Style) -> bool {
+        let new = style.get_prop::<P>();
+        let changed = new != *state;
+        *state = new;
+        changed
+    }
     fn get(state: &Self::State) -> Self::Type {
         state.clone()
     }
@@ -261,6 +329,9 @@ impl<R: StylePropReader> ExtratorField<R> {
     pub fn read(&mut self, cx: &LayoutCx) -> bool {
         R::read(&mut self.state, cx)
     }
+    pub fn read_style(&mut self, style: &Style) -> bool {
+        R::read_style(&mut self.state, style)
+    }
     pub fn get(&self) -> R::Type {
         R::get(&self.state)
     }
@@ -275,7 +346,6 @@ macro_rules! prop {
     ($v:vis $name:ident: $ty:ty { $($options:tt)* } = $default:expr
     ) => {
         #[derive(Default, Copy, Clone)]
-        #[allow(non_camel_case_types)]
         $v struct $name;
         impl $crate::style::StyleProp for $name {
             type Type = $ty;
@@ -315,6 +385,13 @@ macro_rules! prop_extracter {
         }
 
         impl $name {
+            #[allow(dead_code)]
+            $vis fn read_style(&mut self, style: &$crate::style::Style) -> bool {
+                false
+                $(| self.$prop.read_style(style))*
+            }
+
+            #[allow(dead_code)]
             $vis fn read(&mut self, cx: &$crate::context::LayoutCx) -> bool {
                 false
                 $(| self.$prop.read(cx))*
@@ -359,6 +436,7 @@ pub struct Style {
     pub(crate) map: HashMap<StylePropRef, StyleMapValue<Rc<dyn Any>>>,
     pub(crate) selectors: HashMap<StyleSelector, Style>,
     pub(crate) responsive: HashMap<ScreenSizeBp, Style>,
+    pub(crate) classes: HashMap<StyleClassRef, Style>,
 }
 
 impl Style {
@@ -390,17 +468,45 @@ impl Style {
     }
 
     pub(crate) fn selectors(&self) -> StyleSelectors {
-        let mut result =
-            self.selectors
-                .iter()
-                .fold(StyleSelectors::default(), |mut s, (selector, map)| {
-                    s.selectors |= map.selectors().selectors;
-                    s.set(*selector, true)
-                });
+        let mut result = self
+            .selectors
+            .iter()
+            .fold(StyleSelectors::default(), |s, (selector, map)| {
+                s.union(map.selectors()).set(*selector, true)
+            });
         result.responsive |= !self.responsive.is_empty();
         result
     }
 
+    pub(crate) fn apply_classes_from_context(
+        mut self,
+        classes: &[StyleClassRef],
+        context: &Style,
+    ) -> Style {
+        for class in classes {
+            if let Some(map) = context.classes.get(class) {
+                self.apply_mut(map.clone());
+            }
+        }
+        self
+    }
+
+    pub fn apply_class<C: StyleClass>(mut self, _class: C) -> Style {
+        if let Some(map) = self.classes.get(&C::class_ref()) {
+            self.apply_mut(map.clone());
+        }
+        self
+    }
+
+    pub fn apply_selectors(mut self, selectors: &[StyleSelector]) -> Style {
+        for selector in selectors {
+            if let Some(map) = self.selectors.remove(selector) {
+                self.apply_mut(map.apply_selectors(selectors));
+            }
+        }
+        self
+    }
+
     pub(crate) fn apply_interact_state(
         &mut self,
         interact_state: &InteractionState,
@@ -449,17 +555,21 @@ impl Style {
         }
     }
 
-    pub(crate) fn apply_only_inherited(map: &mut Rc<Style>, over: &Style) {
+    pub(crate) fn apply_only_inherited(this: &mut Rc<Style>, over: &Style) {
         let any_inherited = over.map.iter().any(|(p, _)| p.info.inherited);
 
-        if any_inherited {
+        if any_inherited || !over.classes.is_empty() {
             let inherited = over
                 .map
                 .iter()
                 .filter(|(p, _)| p.info.inherited)
                 .map(|(p, v)| (*p, v.clone()));
 
-            Rc::make_mut(map).map.extend(inherited);
+            let this = Rc::make_mut(this);
+            this.map.extend(inherited);
+            for (class, map) in &over.classes {
+                this.set_class(*class, map.clone());
+            }
         }
     }
 
@@ -481,6 +591,15 @@ impl Style {
         }
     }
 
+    fn set_class(&mut self, class: StyleClassRef, map: Style) {
+        match self.classes.entry(class) {
+            Entry::Occupied(mut e) => e.get_mut().apply_mut(map),
+            Entry::Vacant(e) => {
+                e.insert(map);
+            }
+        }
+    }
+
     pub(crate) fn builtin(&self) -> BuiltinStyle<'_> {
         BuiltinStyle { style: self }
     }
@@ -493,6 +612,9 @@ impl Style {
         for (breakpoint, map) in over.responsive {
             self.set_breakpoint(breakpoint, map);
         }
+        for (class, map) in over.classes {
+            self.set_class(class, map);
+        }
     }
 
     /// Apply another `Style` to this style, returning a new `Style` with the overrides
@@ -565,6 +687,12 @@ impl StyleSelectors {
         let bit = 1_u8.checked_shl(v).unwrap();
         self.selectors & bit != 0
     }
+    pub(crate) fn union(self, other: StyleSelectors) -> StyleSelectors {
+        StyleSelectors {
+            selectors: self.selectors | other.selectors,
+            responsive: self.responsive | other.responsive,
+        }
+    }
     pub(crate) fn has_responsive(self) -> bool {
         self.responsive
     }
@@ -857,6 +985,16 @@ impl Style {
         self
     }
 
+    pub fn class<C: StyleClass>(
+        mut self,
+        _class: C,
+        style: impl Fn(Style) -> Style + 'static,
+    ) -> Self {
+        let over = style(Style::default());
+        self.set_class(C::class_ref(), over);
+        self
+    }
+
     pub fn width_full(self) -> Self {
         self.width_pct(100.0)
     }
diff --git a/src/update.rs b/src/update.rs
index 8c367517..2cd4f55c 100644
--- a/src/update.rs
+++ b/src/update.rs
@@ -9,7 +9,7 @@ use crate::{
     event::EventListener,
     id::Id,
     menu::Menu,
-    style::{Style, StyleSelector},
+    style::{Style, StyleClassRef, StyleSelector},
 };
 
 thread_local! {
@@ -52,6 +52,10 @@ pub(crate) enum UpdateMessage {
         id: Id,
         style: Style,
     },
+    Class {
+        id: Id,
+        class: StyleClassRef,
+    },
     StyleSelector {
         id: Id,
         selector: StyleSelector,
diff --git a/src/view.rs b/src/view.rs
index 06ce7e48..89bc190d 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -96,7 +96,7 @@ use crate::{
     event::{Event, EventListener},
     id::Id,
     inspector::CaptureState,
-    style::{BoxShadowProp, LayoutProps, Outline, OutlineColor, Style, ZIndex},
+    style::{BoxShadowProp, LayoutProps, Outline, OutlineColor, Style, StyleClassRef, ZIndex},
 };
 
 bitflags! {
@@ -117,6 +117,10 @@ pub trait View {
         None
     }
 
+    fn view_class(&self) -> Option<StyleClassRef> {
+        None
+    }
+
     fn child(&self, id: Id) -> Option<&dyn View>;
 
     fn child_mut(&mut self, id: Id) -> Option<&mut dyn View>;
@@ -194,7 +198,22 @@ pub trait View {
         cx.save();
 
         let view_style = self.view_style();
-        cx.app_state_mut().compute_style(self.id(), view_style);
+        let view_class = self.view_class();
+        let class = cx.app_state_mut().view_state(self.id()).class;
+        let class_array;
+        let classes = if let Some(class) = class {
+            class_array = [class];
+            &class_array[..]
+        } else {
+            &[]
+        };
+        cx.app_state.compute_style(
+            self.id(),
+            view_style,
+            view_class,
+            classes,
+            &cx.style.current,
+        );
         let style = cx.app_state_mut().get_computed_style(self.id()).clone();
 
         cx.style.direct = style;
@@ -1041,6 +1060,10 @@ impl View for Box<dyn View> {
         (**self).view_style()
     }
 
+    fn view_class(&self) -> Option<StyleClassRef> {
+        (**self).view_class()
+    }
+
     fn child(&self, id: Id) -> Option<&dyn View> {
         (**self).child(id)
     }
diff --git a/src/views/decorator.rs b/src/views/decorator.rs
index a01d8b8d..d3fb04b1 100644
--- a/src/views/decorator.rs
+++ b/src/views/decorator.rs
@@ -6,7 +6,7 @@ use crate::{
     animate::Animation,
     event::{Event, EventListener},
     menu::Menu,
-    style::{Style, StyleSelector},
+    style::{Style, StyleClass, StyleSelector},
     view::View,
 };
 
@@ -78,6 +78,11 @@ pub trait Decorators: View + Sized {
         self
     }
 
+    fn class<C: StyleClass>(self, _class: C) -> Self {
+        self.id().update_class(C::class_ref());
+        self
+    }
+
     /// Allows the element to be navigated to with the keyboard. Similar to setting tabindex="0" in html.
     fn keyboard_navigatable(self) -> Self {
         let id = self.id();
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index e608fd55..af3f6068 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -9,7 +9,8 @@ use crate::{
     event::Event,
     id::Id,
     prop, prop_extracter,
-    style::{BorderRadius, PositionProp, Style},
+    style::{Background, BorderColor, BorderRadius, PositionProp, Style, StyleSelector},
+    style_class,
     unit::{Px, PxPct},
     view::{ChangeFlags, View},
 };
@@ -40,28 +41,26 @@ enum BarHeldState {
     Horizontal(f64, Vec2),
 }
 
-prop!(pub HandleColor: Color { inherited } = Color::rgba8(0, 0, 0, 120));
-prop!(pub HoverColor: Color { inherited } = Color::rgba8(0, 0, 0, 140));
-prop!(pub DragColor: Color { inherited } = Color::rgba8(0, 0, 0, 160));
+style_class!(pub Handle);
+style_class!(pub Track);
+
 prop!(pub Rounded: bool { inherited } = cfg!(target_os = "macos"));
 prop!(pub Thickness: Px { inherited } = Px(10.0));
-prop!(pub EdgeWidth: Px { inherited } = Px(0.0));
-prop!(pub HandleRadius: Px { inherited } = Px(0.0));
-prop!(pub BgActiveColor: Color { inherited } = Color::rgba8(0, 0, 0, 25));
+prop!(pub Border: Px { inherited } = Px(0.0));
 
 prop_extracter! {
     ScrollStyle {
-        handle_color: HandleColor,
-        hover_color: Option<HoverColor>,
-        drag_color: Option<DragColor>,
-        handle_radius: HandleRadius,
+        color: Background,
+        border_radius: BorderRadius,
+        border_color: BorderColor,
+        border: Border,
         rounded: Rounded,
         thickness: Thickness,
-        edge_width: EdgeWidth,
-        bg_active_color: Option<BgActiveColor>,
     }
 }
 
+const HANDLE_COLOR: Color = Color::rgba8(0, 0, 0, 120);
+
 pub struct Scroll<V: View> {
     id: Id,
     child: V,
@@ -73,14 +72,18 @@ pub struct Scroll<V: View> {
     child_viewport: Rect,
     onscroll: Option<Box<dyn Fn(Rect)>>,
     held: BarHeldState,
-    vbar_hover: bool,
-    hbar_hover: bool,
-    vbar_whole_hover: bool,
-    hbar_whole_hover: bool,
+    v_handle_hover: bool,
+    h_handle_hover: bool,
+    v_track_hover: bool,
+    h_track_hover: bool,
     virtual_node: Option<Node>,
     propagate_pointer_wheel: bool,
     vertical_scroll_as_horizontal: bool,
-    style: ScrollStyle,
+    handle_style: ScrollStyle,
+    handle_active_style: ScrollStyle,
+    handle_hover_style: ScrollStyle,
+    track_style: ScrollStyle,
+    track_hover_style: ScrollStyle,
     hide: bool,
 }
 
@@ -94,15 +97,19 @@ pub fn scroll<V: View>(child: V) -> Scroll<V> {
         child_viewport: Rect::ZERO,
         onscroll: None,
         held: BarHeldState::None,
-        vbar_hover: false,
-        hbar_hover: false,
-        vbar_whole_hover: false,
-        hbar_whole_hover: false,
+        v_handle_hover: false,
+        h_handle_hover: false,
+        v_track_hover: false,
+        h_track_hover: false,
         virtual_node: None,
         propagate_pointer_wheel: false,
         vertical_scroll_as_horizontal: false,
         hide: false,
-        style: Default::default(),
+        handle_style: Default::default(),
+        handle_active_style: Default::default(),
+        handle_hover_style: Default::default(),
+        track_style: Default::default(),
+        track_hover_style: Default::default(),
     }
 }
 
@@ -320,83 +327,86 @@ impl<V: View> Scroll<V> {
             .map(|layout| Size::new(layout.size.width as f64, layout.size.height as f64))
     }
 
+    fn v_handle_style(&self) -> &ScrollStyle {
+        if let BarHeldState::Vertical(..) = self.held {
+            &self.handle_active_style
+        } else if self.v_handle_hover {
+            &self.handle_hover_style
+        } else {
+            &self.handle_style
+        }
+    }
+
+    fn h_handle_style(&self) -> &ScrollStyle {
+        if let BarHeldState::Horizontal(..) = self.held {
+            &self.handle_active_style
+        } else if self.h_handle_hover {
+            &self.handle_hover_style
+        } else {
+            &self.handle_style
+        }
+    }
+
     fn draw_bars(&self, cx: &mut PaintCx) {
-        let edge_width = self.style.edge_width().0;
         let scroll_offset = self.child_viewport.origin().to_vec2();
-        let radius = |rect: Rect, vertical| {
-            if self.style.rounded() {
+        let radius = |style: &ScrollStyle, rect: Rect, vertical| {
+            if style.rounded() {
                 if vertical {
                     (rect.x1 - rect.x0) / 2.
                 } else {
                     (rect.y1 - rect.y0) / 2.
                 }
             } else {
-                self.style.handle_radius().0
+                style.border_radius().0
             }
         };
 
         if let Some(bounds) = self.calc_vertical_bar_bounds(cx.app_state) {
-            let color = if let BarHeldState::Vertical(..) = self.held {
-                if let Some(color) = self.style.drag_color() {
-                    color
+            let style = self.v_handle_style();
+            let track_style =
+                if self.v_track_hover || matches!(self.held, BarHeldState::Vertical(..)) {
+                    &self.track_hover_style
                 } else {
-                    self.style.handle_color()
-                }
-            } else if self.vbar_hover {
-                if let Some(color) = self.style.hover_color() {
-                    color
-                } else {
-                    self.style.handle_color()
-                }
-            } else {
-                self.style.handle_color()
-            };
-            if self.vbar_whole_hover || matches!(self.held, BarHeldState::Vertical(..)) {
+                    &self.track_style
+                };
+
+            if let Some(color) = track_style.color() {
                 let mut bounds = bounds - scroll_offset;
                 bounds.y0 = self.actual_rect.y0;
                 bounds.y1 = self.actual_rect.y1;
-                if let Some(color) = self.style.bg_active_color() {
-                    cx.fill(&bounds, color, 0.0);
-                }
+                cx.fill(&bounds, color, 0.0);
             }
+            let edge_width = style.border().0;
             let rect = (bounds - scroll_offset).inset(-edge_width / 2.0);
-            let rect = rect.to_rounded_rect(radius(rect, true));
-            cx.fill(&rect, color, 0.0);
+            let rect = rect.to_rounded_rect(radius(style, rect, true));
+            cx.fill(&rect, style.color().unwrap_or(HANDLE_COLOR), 0.0);
             if edge_width > 0.0 {
-                cx.stroke(&rect, color, edge_width);
+                cx.stroke(&rect, style.border_color(), edge_width);
             }
         }
 
         // Horizontal bar
         if let Some(bounds) = self.calc_horizontal_bar_bounds(cx.app_state) {
-            let color = if let BarHeldState::Horizontal(..) = self.held {
-                if let Some(color) = self.style.drag_color() {
-                    color
+            let style = self.h_handle_style();
+            let track_style =
+                if self.h_track_hover || matches!(self.held, BarHeldState::Horizontal(..)) {
+                    &self.track_hover_style
                 } else {
-                    self.style.handle_color()
-                }
-            } else if self.hbar_hover {
-                if let Some(color) = self.style.hover_color() {
-                    color
-                } else {
-                    self.style.handle_color()
-                }
-            } else {
-                self.style.handle_color()
-            };
-            if self.hbar_whole_hover || matches!(self.held, BarHeldState::Horizontal(..)) {
+                    &self.track_style
+                };
+
+            if let Some(color) = track_style.color() {
                 let mut bounds = bounds - scroll_offset;
                 bounds.x0 = self.actual_rect.x0;
                 bounds.x1 = self.actual_rect.x1;
-                if let Some(color) = self.style.bg_active_color() {
-                    cx.fill(&bounds, color, 0.0);
-                }
+                cx.fill(&bounds, color, 0.0);
             }
+            let edge_width = style.border().0;
             let rect = (bounds - scroll_offset).inset(-edge_width / 2.0);
-            let rect = rect.to_rounded_rect(radius(rect, false));
-            cx.fill(&rect, color, 0.0);
+            let rect = rect.to_rounded_rect(radius(style, rect, false));
+            cx.fill(&rect, style.color().unwrap_or(HANDLE_COLOR), 0.0);
             if edge_width > 0.0 {
-                cx.stroke(&rect, color, edge_width);
+                cx.stroke(&rect, style.border_color(), edge_width);
             }
         }
     }
@@ -410,7 +420,9 @@ impl<V: View> Scroll<V> {
             return None;
         }
 
-        let bar_width = self.style.thickness().0;
+        let style = self.v_handle_style();
+
+        let bar_width = style.thickness().0;
         let bar_pad = 0.0;
 
         let percent_visible = viewport_size.height / content_size.height;
@@ -418,7 +430,7 @@ impl<V: View> Scroll<V> {
 
         let length = (percent_visible * viewport_size.height).ceil();
         // Vertical scroll bar must have ast least the same height as it's width
-        let length = length.max(self.style.thickness().0);
+        let length = length.max(style.thickness().0);
 
         let top_y_offset = ((viewport_size.height - length) * percent_scrolled).ceil();
         let bottom_y_offset = top_y_offset + length;
@@ -441,7 +453,9 @@ impl<V: View> Scroll<V> {
             return None;
         }
 
-        let bar_width = self.style.thickness().0;
+        let style = self.h_handle_style();
+
+        let bar_width = style.thickness().0;
         let bar_pad = 0.0;
 
         let percent_visible = viewport_size.width / content_size.width;
@@ -546,23 +560,23 @@ impl<V: View> Scroll<V> {
         let scroll_offset = self.child_viewport.origin().to_vec2();
         let pos = pos + scroll_offset;
         let hover = self.point_hits_vertical_bar(app_state, pos);
-        if self.vbar_hover != hover {
-            self.vbar_hover = hover;
+        if self.v_handle_hover != hover {
+            self.v_handle_hover = hover;
             app_state.request_layout(self.id);
         }
         let hover = self.point_hits_horizontal_bar(app_state, pos);
-        if self.hbar_hover != hover {
-            self.hbar_hover = hover;
+        if self.h_handle_hover != hover {
+            self.h_handle_hover = hover;
             app_state.request_layout(self.id);
         }
         let hover = self.point_within_vertical_bar(app_state, pos);
-        if self.vbar_whole_hover != hover {
-            self.vbar_whole_hover = hover;
+        if self.v_track_hover != hover {
+            self.v_track_hover = hover;
             app_state.request_layout(self.id);
         }
         let hover = self.point_within_horizontal_bar(app_state, pos);
-        if self.hbar_whole_hover != hover {
-            self.hbar_whole_hover = hover;
+        if self.h_track_hover != hover {
+            self.h_track_hover = hover;
             app_state.request_layout(self.id);
         }
     }
@@ -636,7 +650,22 @@ impl<V: View> View for Scroll<V> {
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
         cx.layout_node(self.id, true, |cx| {
-            self.style.read(cx);
+            let style = cx.style();
+
+            let handle_style = style.clone().apply_class(Handle);
+            self.handle_style.read_style(&handle_style);
+            self.handle_hover_style.read_style(
+                &handle_style
+                    .clone()
+                    .apply_selectors(&[StyleSelector::Hover]),
+            );
+            self.handle_active_style
+                .read_style(&handle_style.apply_selectors(&[StyleSelector::Active]));
+
+            let track_style = style.apply_class(Track);
+            self.track_style.read_style(&track_style);
+            self.track_hover_style
+                .read_style(&track_style.apply_selectors(&[StyleSelector::Hover]));
 
             let child_id = self.child.id();
             let child_view = cx.app_state_mut().view_state(child_id);
@@ -781,10 +810,10 @@ impl<V: View> View for Scroll<V> {
                 }
             }
             Event::PointerLeave => {
-                self.vbar_hover = false;
-                self.hbar_hover = false;
-                self.vbar_whole_hover = false;
-                self.hbar_whole_hover = false;
+                self.v_handle_hover = false;
+                self.h_handle_hover = false;
+                self.v_track_hover = false;
+                self.h_track_hover = false;
                 cx.app_state.request_layout(self.id);
             }
             _ => {}
diff --git a/src/window_handle.rs b/src/window_handle.rs
index 61c050dc..e5df9144 100644
--- a/src/window_handle.rs
+++ b/src/window_handle.rs
@@ -700,6 +700,11 @@ impl WindowHandle {
                         state.style = style;
                         cx.request_layout(id);
                     }
+                    UpdateMessage::Class { id, class } => {
+                        let state = cx.app_state.view_state(id);
+                        state.class = Some(class);
+                        cx.request_layout(id);
+                    }
                     UpdateMessage::StyleSelector {
                         id,
                         style,