CSS Lessons Learned

Sunday, January 15, 2012

Don't specify units in pixels except where assets are used. This avoids constantly resizing things when a font changes. Instead, focus on using most everything in terms of font sizes unit 'em'. This allows margins and paddings to automatically scale with the font size.

Use margins most of the time. Rarely will a padding be called for. Margins allow for more scalable layout since the box model gets weird with padding.

Specify font sizes in terms of human readable strings such as 'normal' or 'large' to avoid an unreadable site for somebody who has changed the minimum font sizes or face for each category.

Designing for mobile first means you generally have more concise styles that are intrinsic to the page layout and work better when scaling up. When you are scaling up, it becomes much easier to add a little bit of a margin here or there and then adjust the overal font sizes used on the page to make previous styles still applicable.

Additionally, chances are that the larger the screen of the client, the more powerful the computer. This means a larger screen client will be able to handle additional styles easier, rather than having a mobile client interpret all the desktop styles, then additionally interpret the mobile styles.

• css
• design
• programming
• responsive
• thesite

Last modified Sunday, January 15, 2012