CSS is the glue that holds websites together. It controls the way elements lay on the page, respond to smaller screens, and even the movement of elements through animation. The power of CSS has grown exponentially over the past few years, especially with the increase in mobile use and introduction of CSS3.
Through my travels in the CSS world, I have found that a lot of people are using outdated CSS rules on their site. Which end up causing issues on smaller screens and/or browser compatibility. The following rules or “commandments” are my personal tips in styling websites dynamically with CSS.
- Do Not Set a Fixed Pixel Width – Back in the old days (which means in the 90s and early 2000s) everything was built in table format. Because of this way of living, people became accustom to creating elements by giving a set height and width. Well today this practice does not work, mainly because as screen sizes go smaller these fixed widths break. This creates the side to side scrolling effect on tablets and phones, which is not supposed to happen.Obviously when creating buttons or other visual pieces on a website, you can set a fixed width.
I am stating that elements like <section> and those like it, should not have a fixed width. So what’s the alternative? Well lucky for us, browsers and html elements will automatically grow with elements inside of them. This default of “inherit” will inherit the size (width and height) needed to keep all of the nested elements within the parent element. Also, set widths in percentage. So for example set your YouTube video with a 100% width instead of a 1200px width. This way the video will adjust with screen size and parent element.
- Use Floats Wisely – First off, just as mentioned in the last rule, there are times when floating is appropriate. However, I have found that in most situations, displaying elements inline-block and aligning them into position is best. Floats override displays and aligns in CSS and are considered a “hard” positioning tactic. I have found a lot of people that use float, are unaware of the “clear” style for parent floated child elements.As you go along floating, it is usually necessary to clear elements that should not be affected by their parent floats. Next time, try to use display: inline-block (with percentage widths as necessarily) and enter the realm of alignments. You will be amazed what the power of vertical align will do for your website.
- Do Not Abuse Position Absolute: This should seem like an obvious statement, but time and time again I see sites positioning elements on a site absolutely. It is easy to position absolutely when frustrated with elements not sitting correctly. However, do not give into temptation, as it will more than likely lead to more media query work.
- Do Not Code Bloat – This basically means when it comes to webpages, less is usually more. When styling your site out, make sure to keep in mind to keep things minimal. For example, if all of your p tags throughout your site are size 15px, then there is no need to go through all of your p tags classes/ids and add font size 15px. Add this size to one p tag at the top of your CSS file that will be passed down throughout the site. Another tip is to minify your CSS after the site is finished. It might be annoying to work with but will save your site some load time.
- Do Not Forget Browser Compatibility – While your snazzy transform effect looks great in your chrome browser, do not forget to add the other vendor-prefixed properties. These prefixed properties are -moz-, -ms-, and -webkit-, and are used on some CSS3 attributes in order to render in corresponding browsers. It can be frustrating for users when trying to access your site and there are effects/positioning out of line.