CSS Best Practices

Child Theming, Dev Tutorials

Last Updated: Time to Read: 4 minutes

This article applies primarily to CSS standards set forth by Layers for professional development of Child Themes and Layers Extensions, but offers valuable advice for formatting your stylesheets in any project.

  • Do not change class names or IDs in native Layers template code. Adding custom classes or IDs (where missing) is OK
  • Keep child theme CSS in one document if possible. This reduces the chances your theme will have load order issues and will be easier for extensions developers to reference and override where needed.
  • Never copy the entire contents of the Layers stylesheets to your theme or extension.
  • Avoid forcing specific font sizes, families and styles on text elements – these must remain customizable using Layers site settings, font options and builder widget controls. Setting global defaults is OK.

Child themes work best if CSS is kept in the style.css and is not broken out into several dependencies. This is due to how WordPress orders and enqueues stylesheets and also concerns added load times when several stylesheets must be located and loaded – save yourself the headache and just comment one stylesheet well instead of breaking it up.

Format: Waterfall

The order of your CSS attributes is very important. By using the same attribute flow in each attribute it becomes much easier for another developer to pick up your work and make changes. Finding attributes is easier, formatting is quicker.

For example if a developer is trying to find the float attribute, they will always know to look near the top of a declaration, resulting in less frustration and quicker changes.

In most cases, the order of CSS properties in a style should be alphabetic.

You can use a tool like Codebeautifier or ProCSSor to help lint and format your stylesheets.

DevKit adds CSS and JS building tools to your WordPress customizerfor reliable, rapid styling. Its built-in linting and mobile modes help produce preformatted stylesheets with built-in media queries you can quickly copy paste into your child theme files. Check it Out

Group for Better Context

Group attributes which can affect one another. Background and borders directly affect the look and feel of each other so it’s much more useful for them to be next to each other in a declaration.

The same goes for margin, padding, width, height. Keep these close to each other so it’s easier to get a mental picture of what’s happening on the front end.

No Yes

Segment relevant CSS with commented headings and keep them in read order

No Yes

Utilize the browser inspector to quickly find class names and the original Layers CSS selectors to ensure the most efficient and safe overrides. This also ensures customization controls in Layers or Layers extensions that use those selectors will continue to work with your Child Theme active. See CSS Styling Using the Browser Inspector & Customizer for a developer primer on Rapid Restyling in the Customizer.

!important is a flag placed inside a style that tells the browser to apply that property to the selector above all else. This is usually pretty effective, especially when you can’t find where the original is coming from, but should be avoided if at all possible, as this may interfere with styling on other elements you aren’t expecting, or break customization options in the core or extensions.

The problem with this is that it keeps anyone from being able to override your style, including Layers plugin authors. If your child theme is for a specific project and sports a unique style, !important is OK to use. If your theme will be distributed, sold or used by many different sites, avoid it at all costs!

In short, if you have to use !important to get something to work, it likely means something is wrong with your selector choice or how your stylesheets are loading. The only valid use of !important is when styles are being set inline, or the original style is using it.

Rem is important for auto-scaling fonts across different screen sizes, and auto-calculating line-height.

Learn more about rem here

No Yes
  • Use the background-color property when setting background colors when possible so your style does not reset or interfere with other background property attributes applied to the element.
  • Use HEX (#123456) for color instead of RGB values unless you specifically need to apply or reset a combined opacity.
No Yes

OR

 

 

For a transparent background:

Simplify as much as possible.  For example, with colors, determine your color palette ahead of time and write it out in your stylesheet header. This keeps your color declarations consistent and easier to find/replace:

Once your stylesheet is complete, be sure to lint it. Linting checks your code for errors such as missing semi-colons or typos, and notifies you when selectors are overqualified or duplicated. Note that some of the original Layers selectors are overqualified on purpose and can be ignored in lint results. Linting can be done using DevKit (enable in DevKit options) or an online linter such as CSSLint or  ProCSSor.