Namespaces are a bit obscure feature in CSS but it is a feature which can come handy when you want to embed SVGs or other XML documents into HTML code. Even though it is not necessary to use namespaces in CSS and simply add styles into the XML mark up, it is definitely a good option when you want to disentangle CSS and markup.
Namespaces belong to the group of @-keywords but must appear at the very top of the document before any other declaration except other namespace declaration with syntax:
@namespace name url(namespace-uri);
When you leave the name empty the browser will decide that it is the default namespace.
There are three allowed namespaces:
The usage in the style sheet:
As you can see it’s not a feature which revolutionises how we use CSS, it’s more of an interesting feature for piece of mind when embedding SVGs or MathML into HTML code and using only one stylesheet for all.