Why CSS for Xaml?

TL;DR
Getting Started

Concise

Styling with (s)css gives a more concise declaration of your styles. XamlCSS even supports a subset of SCSS features like selector nesting, css-variables and mixins. This enables you to make your declarations even more concise.

Freely Combine Styles

Other than vanilla Xaml-styles, css allows you to feely combine styles - no BasedOn restriction. Even better, this is done for you behind the curtains!
And if you really want to combine styles yourself use @extend.

Semantic Meaning

Semantic meaning can be conveyed, i.e. is your ui-element important, a warning, a header or a sub-header? This is archieved by using css-classes.

Based On View-Hierarchy

Css takes into account where inside your view-hierarchy your element gets added. No need to manually assigning a style.
It also detects that an element was added or removed.
In combination with semantic selectors you can i.e. style a button differently just because it is in a warning dialog. And if you want to create a dark, a light and a custom theme, just switch the css-class-name on your root view-element and all elements update themselves automatically.

Support For Xaml-Features

You can use markup-extensions and triggers in your (s)css.

In css you cannot declare an instance of an object as you can do in xaml. A Storyboard for example must be declared as usual in a ResourceDictionary but then can be referenced in css with a markup-extension.

Designer Support

XamlCSS builds on top of the native Xaml-Style implementations, so it works with the WPF and UWP designer. For Xamarin.Forms there is LiveXAML.

Feature Comparison

Feature	XamlCSS	Xaml
Directly setting values	<Button TextColor="Red" />	<Button Foreground="Red" />
Apply styles to types of controls	Button { TextColor: Red; }	<Style TargetType="{x:Type Button}"> <Setter Property="Foreground" Value="Red" /> </Style>
Base styles on one another	.style1 { @extend(.styleBase); }	<Style x:Key="style1" BasedOn="{StaticResource styleBase}">...</Style>
Apply style to one specific control	#button-a { TextColor: Red; } applied <Button Name="button-a" />	<Style x:Key="styleForButtonA">...</Style> applied <Button Style="{StaticResource styleForButtonA}" />
Apply styles to categories ("classes") of controls	.warning { TextColor: Orange; } applied <Button css:Css.Class="warning" />	-
Apply styles to categories of specific control-types	Button.warning { TextColor: Orange; }	-
Consider nesting of controls	.message-box .footer Button.warning {     TextColor: Orange; } or .message-box {     .footer {         Button.warning {             TextColor: Orange;         }     } }	-
Combine styles from many categories	<Button class="warning primary flat" />	- (create style for each used combination)

Css is far more lightweight, concise and versatile than existing Xaml-styling. This project aims to bring these features of Css to Xaml!

*) Personal view

Getting Started