A living CSS style guide is a page on your site that uses your current CSS styles and acts as a reference for all the currently available visual elements and design patterns. This helps to tightly integrate design into your delivery process by promoting co-ownership of the UI and avoids duplication of styling across your application. Styling changes are visible …

What is BEM? BEM stands for Block, Element, Modifier. The meaning of these terms will be described further in the article. One of the most common examples of a methodology in programming is Object-Oriented Programming. It’s a programming paradigm embodied by many languages. In some ways, BEM is similar to OOP. It’s a way of describing reality in code, a …

OOCSS Object-Oriented CSS starts with pattern recognition: determining what page elements are similarly structured and used frequently on the site. Once a pattern is identified, the design element can be made into a module. Then the module can be skinned for the different ways it shows up across the site. OOCSS has two key principles. The first is to separate …

Everyone has a name for them: the excellent Phil Hawksworth calls them “delighters”, my friend Tom Knowles and I call them “showbiz coding.” They are little bits of UI that do something unexpected and fun. I’m going to jump to my favourite kind: 3D effects. They give your UI some depth and, much as with the Spanish Inquisition, nobody expects …

Progress, Not Perfection In his presentation Breaking Good Habits, Harry Roberts accurately states that “CSS is such a mess that even when you clean it up, it’s still a mess.” Our goal is to make our CSS better, not perfect. So look at each of these approaches with an open mind. Remember, the point is not to drive yourself crazy …

Front-end Code Standards & Best Practices Overview This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Roundarch Isobar. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. via Front-end Code Standards & Best Practices | Roundarch Isobar. Excellent and in depth notes …