Tuesday, March 19, 2024

10 Expert Tips for Better CSS Coding

CSS allows for incredible control over website content and can be the “secret sauce” of a website´s success. CSS can also cause some major problems depending on how it´s coded and instead of making a website more efficient it can actually slow the site down. In this article we look at several tips to improve CSS coding.  

 

1.      Have a Style Guide: This will create many positive benefits, which are:

  •  It will set a standard for quality
  • It will offer valuable information to one or more coders who work on the project
  • It will map out and organize code so developers can expect consistency with every project
  • It will include commenting to make it easier to understand the purpose of each section of code
  • It will increase productivity

 

2.      Test CSS and HTML Components Together: As you create your CSS, test it with the corresponding HTML components to make sure it works and keep those components in place as you build your CSS. Having a reference will give you valuable feedback if/when something changes in your code and you´re not sure why. When you begin to build your layout, add the headers, footers and a bit of content to begin with. This gives you a framework which you can fill in as you go.

 

3.      Create a Template Library: While time-intensive to create, a template library will save you a lot of time down the road because you will be able to access (and modify if necessary) templates when working on new projects. Having a template library will save you from the laborious task of having to write out your code from scratch every time you begin a new project. Another option is to make use of CSS snippets to save time. This article gives you access to several resources for your CSS projects.

 

4.      Use Google Developers PageSpeed Insights: One way you can determine how well your CSS is performing is to make use of the Google Webmaster tools. Their diagnostic programs will access your website and alert you to different problems which need to be addressed.

 

I used these tools on my site: HowToEndYourSuffering.com The site was built using the OptimizePress template. As you can see, by the above screen shot, PageSpeed Insights generated a report for both the mobile and desktop site, with suggestions on how to improve the performance.

5.     

            Minify CSS: One of the checks was for Minifying CSS and my site passed. The report gives you instructions on how to minify your CSS if your site fails. On the Minify Resources page, there is information on how to minify HTML, JavaScript and CSS. For CSS, they recommend using YUI Compressor or cssmin.js.

 

6.      Don´t Use Multiple Style Sheets: A previous desktop theme used multiple style sheets. Each style sheet was meant to control various aspects of the theme I was using. Unfortunately, that can slow down site performance. The PageSpeed Insights tools recommended placing all the CSS into one document.

 

7.      Don´t Use the AlphaImageLoader Filter in Internet Explorer: This filter was meant to fix a problem with semi-transparent PNG files in versions < 7. Unfortunately, it blocks rendering, freezes the browser and increases memory consumption. Instead, use the PNG-8 format.

 

8.      Use Legible Font Sizes: This can be a major issue with some mobile sites and also websites in general. Here are some guidelines from the Google Developers site:

·         First off, for mobile devices, make use of an emulator for testing font sizes. Some options are the Apple iOS Simulator,  the Android Software Development Kit (SDK), Blackbery Simulator, and the Windows Phone Emulator.

·         Use a base font size of 16 CSS pixels. Adjust the size as necessary depending on the type of font. Be aware that each font will scale differently

·         Use a browser default vertical spacing of 1.2em. You might need to adjust this for each font.

·         Keep the number of fonts used to a minimum. If you use too many fonts and font sizes you run the risk of creating a cluttered and scattered layout.

·         Be aware that measurements in CSS may not translate to the real world. In other words, a CSS size of one inch on a mobile phone will likely be smaller than a one inch measurement in the real world

·         Be careful of the relationship between fonts adjust the defaults if necessary.

 

9.      Avoid Vendor Specific Tags When Not Necessary: Vendor specific tags were necessary for specific properties which were experimental. To make sure you know whether or not to use these tags, check for changes in the vendor prefixes and omit those which are unnecessary.

 

10.  Always Validate Your Code: If your HTML program doesn´t have a validation component built-in, you can make use of the W3C Validation Service.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured