Open/Closed Principle of OO Programming Applied to CSS

Applying programming principles to HTML, CSS and JS reveals these technologies as legitimate “players” and gives us the tools we need to build, scale and maintain—and a language to describe—the complex systems they (we) are capable of creating. OOCSS and SMACCS are applications of the object oriented paradigm to CSS. Here’s another tenet of OOP—the open/closed principle—as it applies to CSS, that Jonathan Snook just referenced from Harry Roberts’ post, open/closed principle applied to CSS.

In a nutshell –

“software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.”

Harry looks like he’s doing a series as evidenced by April’s The Single Responsibility Principle Applied to CSS

Google says use Responsive Web Design for best ranking of “Smartphone Optimized” websites

From my Twitter digest — RWD is Google’s recommended configuration for best ranking. Separate URLs and conditional markup from the same URL are accounted for but may not get your site ranked as well. Here’s why (from Google’s detailed explanation):

  • Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google’s algorithms assign the indexing properties for the content.
  • No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user-agent-based redirection is error-prone and can degrade your site’s user experience (see “Pitfalls when detecting user-agents” section for details).
  • Responsive web design saves resources for both your site and Google’s crawlers. For responsive web design pages, any Googlebot user-agents needs to crawl your pages once, as opposed to crawling multiple times with different user-agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

Also, Google added smartphone-specific user-agent strings to its mobile bot, Googlebot-Mobile. It’s disappointing that there is a separate “mobile” bot and that they couldn’t stop there and needed to further silo the web with smartphone-specific attributes. Another side-effect of not having a one-web approach, but this is where we are.