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/

1. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
5 TRICKS FOR WRITING
BETTER WORDPRESS
THEME CSS

2. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Use A Css
Pre-processor1

3. 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
✗
✗

4. 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.

5. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Never
Copy & Paste2

6. 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.

7. 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.

8. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Leverage
Pre-Processor
Plugins
3

9. 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

10. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Keep SaSS Files
Short & Focused4

11. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Keep Files Organized
Small, obviously named files make your project easy to understand and
evolve.

12. 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.

13. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Refactor
Frequently5

14. 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.
✗

15. WORDPRESS FOR DEVELOPERS https://wpfordevs.com
Read the Entire Article At:
https://wpfordevs.com/2015/11/28/5-tricks-for-writing-better-theme-css/