Fixing Ghost Stylesheets

One downfall of many Ghost themes is excessive class selector use in their stylesheets.

Illustration of a ghost.

I will sing the praises of Ghost as a CMS all day, except for one thing I have run into several times—too many class selectors in their stylesheets.

One of my favorite ways to use class selectors is to define large containers or logical "objects" in a site's design. For instance, a "card" of some nature should have a class name assigned to it, a "feed" should have a class name given to it, and a "page footer" should have a class name, too (if it's a simple footer, at least). These conceptual items are categories of things. They are the building blocks of a site's design and are ideally suited to having CSS class selectors and HTML class names applied to them.

The problem comes when you start overapplying these selectors. Your post-card then has a child class post-card-link which wraps around a post-card-image and a post-card-header, and the header wraps around a post-card-header-title as well as a post-card-header-author-byline, which has a span in it called post-card-header-author-byline-text.

It makes everything incredibly wordy, and while it's descriptive and can communicate to a developer who is unfamiliar with your site the intent of the HTML and CSS, it ultimately bogs you down in a sea of words in your stylesheets. You can write comments for a reason, and minifying the CSS will eliminate the few kilobytes of data those comments generate.

Once you have the greater conceptual "items" figured out for your site, it's often best to use CSS combinators to properly define each object's style.

/* The conceptual "object" defined by a class selector */
.post-card {
	/* ... */

/* This object's header element found immediately underneath
   the HTML element with the post-card class via a child selector */
.post-card > header {
 	/* ... */

/* This object's header's title text, immediately underneath
   the header element */
.post-card > header > h2 {
 	/* ... */

/* Aside text found anywhere within a post-card using a descendant 
   selector */
.post-card aside {
 	/* ... */

CSS combinators come in four different flavors:

  • Descendant selectors (space) will style every descendant element of the parent element anywhere below them. The last CSS selector in the example above will apply the chosen styles to all aside elements under a post-card class, no matter how many other elements are in the way.
  • Child selectors (>) select all child elements of a parent, which is the element to the left of the child selector. The header and h2 elements are styled this way in the example above.
  • Adjacent sibling selectors (+) are used to select the sibling element following the leftmost element. This is often used to highlight text or add styles to elements that immediately follow a unique element. Sibling elements, in this case, are elements that share a parent element (such as a div wrapper).
  • General sibling selectors (~) select specific types of elements following the leftmost element. For example, if this were used on an img in a div, and you select all p sibling elements, all the p elements after the img will have the styles applied to them.

Combinators are a potent tool and help you logically group your site's abstractions within code more efficiently while not relying on the burden of many individually-named classes.

They are not without their downsides, however, especially the descendant selector. Using it on elements too far back in your HTML structure will inevitably cause you headaches down the line. It should be reserved for the conceptual objects at the very lowest levels of your site's architecture.

So, returning to the topic of Ghost, I have two recommendations:

The first is to create your own unique themes and styles from the start, circumventing the need for wrestling with prebuilt theme stylesheets.

The second is for those who don't want to deal with the hassle at all—in this case, you should use the theme as-is and don't try to fight it too much. After all, the point of a prebuilt theme is to save you time and let someone else worry about the styling, so take advantage of it.