Simplify Magento CSS Selectors

13 Mar
March 13, 2013

Magento Commerce is an excellent blend of enterprise class eCommerce engine with a very fine integrated content management system (CMS). Saving a CMS page automatically adds a page-specific class to the HTML body element that is very convenient for creating page-specific CSS selectors. However, if the CMS page title is longer than a couple words, the class name can be quite unwieldy, like so:

<body class="cms-page-view my-really-really-long-cms-page-title">

This is potentially a lot of typing for the CSS stylist. The solution? Look no further than the CMS Design tab. Adding the following to the page layout section:

<reference name="root">
<action method="addBodyClass"><className>my-article</className></action>

inserts an extra class name into the markup like so:

<body class="cms-page-view my-really-really-long-cms-page-title my-article">

Now this CSS:

.my-really-really-long-cms-page-title .my-section p h1 { color:lime; }

can look like this:

.my-article .my-section p h1 { color:lime; }

Short, sweet, and very useful in complex stylesheets!

© Copyright 2017 Findaway. All rights reserved.