Expert Ideas for Better CSS Coding

The following is just a snip-it of a huge list on great ways to get your CSS in shape for your projects, especially when CSS can get pretty unwieldy. These are just a few of the ones (some are new to me) that I’ll be sure to implement from here on out:

• Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique⁴], [Ryan Parr]

/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("flash.css");
@import url("structure.css");

<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>

 

Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life¹⁹]

 

Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven⁸⁹²⁴¹³]

and here is THE one that I think I like most of all:

To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook^68341816]

Check out the rest of the article here- it’s got a plethora of great ideas to  use:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

 

What are your expert ideas that really make your life easier? Be sure to share your ideas below!

 

 

 

Cheers!
-Matthew Vazquez