diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 38245b707f6..2c80c2573c8 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -49,6 +49,7 @@ use stylesheets::{CssRuleType, Origin, UrlExtraData};
 use values::generics::text::LineHeight;
 use values::computed;
 use values::computed::NonNegativeLength;
+use values::serialize_atom_name;
 use rule_tree::{CascadeLevel, StrongRuleNode};
 use self::computed_value_flags::*;
 use str::{CssString, CssStringBorrow, CssStringWriter};
@@ -1506,8 +1507,9 @@ impl<'a> ToCss for PropertyDeclarationId<'a> {
     {
         match *self {
             PropertyDeclarationId::Longhand(id) => dest.write_str(id.name()),
-            PropertyDeclarationId::Custom(_) => {
-                serialize_identifier(&self.name(), dest)
+            PropertyDeclarationId::Custom(ref name) => {
+                dest.write_str("--")?;
+                serialize_atom_name(name, dest)
             }
         }
     }
@@ -1587,8 +1589,9 @@ impl ToCss for PropertyId {
             PropertyId::Shorthand(id) => dest.write_str(id.name()),
             PropertyId::LonghandAlias(id, _) => dest.write_str(id.name()),
             PropertyId::ShorthandAlias(id, _) => dest.write_str(id.name()),
-            PropertyId::Custom(_) => {
-                serialize_identifier(&self.name(), dest)
+            PropertyId::Custom(ref name) => {
+                dest.write_str("--")?;
+                serialize_atom_name(name, dest)
             }
         }
     }
diff --git a/components/style/values/mod.rs b/components/style/values/mod.rs
index f02242e78d1..a5f8d0abd32 100644
--- a/components/style/values/mod.rs
+++ b/components/style/values/mod.rs
@@ -9,7 +9,7 @@
 #![deny(missing_docs)]
 
 use Atom;
-pub use cssparser::{serialize_identifier, CowRcStr, Parser, SourceLocation, Token, RGBA};
+pub use cssparser::{serialize_identifier, serialize_name, CowRcStr, Parser, SourceLocation, Token, RGBA};
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
 use std::fmt::{self, Debug, Write};
@@ -60,6 +60,28 @@ where
     serialize_identifier(&ident, dest)
 }
 
+/// Serialize a name which is represented as an Atom.
+#[cfg(feature = "gecko")]
+pub fn serialize_atom_name<W>(ident: &Atom, dest: &mut W) -> fmt::Result
+where
+    W: Write,
+{
+    ident.with_str(|s| serialize_name(s, dest))
+}
+
+/// Serialize a name which is represented as an Atom.
+#[cfg(feature = "servo")]
+pub fn serialize_atom_name<Static, W>(
+    ident: &::string_cache::Atom<Static>,
+    dest: &mut W,
+) -> fmt::Result
+where
+    Static: ::string_cache::StaticAtomSet,
+    W: Write,
+{
+    serialize_name(&ident, dest)
+}
+
 /// Serialize a normalized value into percentage.
 pub fn serialize_percentage<W>(value: CSSFloat, dest: &mut CssWriter<W>) -> fmt::Result
 where
diff --git a/components/style/values/specified/box.rs b/components/style/values/specified/box.rs
index 1f56583575c..7980fb2b2e7 100644
--- a/components/style/values/specified/box.rs
+++ b/components/style/values/specified/box.rs
@@ -756,13 +756,13 @@ impl ToCss for TransitionProperty {
     where
         W: Write,
     {
-        use values::serialize_atom_identifier;
+        use values::serialize_atom_name;
         match *self {
             TransitionProperty::Shorthand(ref s) => s.to_css(dest),
             TransitionProperty::Longhand(ref l) => l.to_css(dest),
             TransitionProperty::Custom(ref name) => {
                 dest.write_str("--")?;
-                serialize_atom_identifier(name, dest)
+                serialize_atom_name(name, dest)
             }
             TransitionProperty::Unsupported(ref i) => i.to_css(dest),
         }