Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 Tricks For Writing Better WordPress Theme Css

5 Tricks For Writing Better WordPress Theme Css

The majority of the work when building a new WordPress theme is in the styling. As developers, WordPress gives us the bulk of the features that an average website needs, meaning it’s our job to translate designer mockups into beautiful, and functional code. Here are 5 useful tricks to make developing theme CSS easy, and maintainable.

Read the full post at https://wpfordevs.com/2015/11/28/5-tricks-for-writing-better-theme-css/

WordPress For Developers

December 03, 2015
Tweet

Other Decks in Technology

Transcript

  1. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Plain CSS Isn’t Enough Even simple

    WordPress themes have too many elements to style by hand. Instead, leverage pre-processor features like nesting to write less code. Too much duplicated code ✗ Simple Changes Cascade Unpredictably Difficult To Refactor ✗ ✗
  2. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Popular Pre-pRocessors CSSNext, Less, and Sass

    are the 3 most popular CSS pre-processors. While they accomplish the same goal, each provides differing strengths and weaknesses.
  3. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Variables, Not Values Don’t hardcode specific

    values like colors or fonts. Using variables reduces the cost of change, while making your style code easier to read.
  4. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Using Mix-Ins Mix-ins are functions for

    your CSS. Rather than manually setting font size, and line height, you can create a mix-in to make sure the math is correct and consistent every time.
  5. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Plugins = Automation Leveraging pre-processor functions

    eliminates the need to worry about implementation details like vendor prefixes. Fit Text - Create progressively larger media queries and font sizes Breakpoint - Media queries made simple Sassy Math - Extends Compass with helpful math functions normalize.css - Easily include the popular reset framework
  6. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Shorter Files Are Better Use lots

    of short files, rather thanking files that encompass multiple elements. Individual files get concatenated into a single file during the build process.
  7. WORDPRESS FOR DEVELOPERS https://wpfordevs.com Destroy Dead Code Unused styles weight

    down your project. Not only will lots of dead code increase page load time, but they can also cause unpredictable bugs down the road. ✗