Open Letter to My Girlfriend (Now finance!)

[dropcap type=”v2″]I[/dropcap] originally wrote this on May 16, 2011 (1 year, 8 months, 29 days ago) and posted in on Facebook for all of our friends and family to read. An open letter to my girlfriend (now finance), I wanted the world to know how amazing she is and how lucky I feel to be with her. I meant every word then and even more so now. Angela Aruffo, soon to be Angela Marshall, Happy Valentine’s Day! I love you Poptart!

Continue reading “Open Letter to My Girlfriend (Now finance!)”

Quick Code: jQuery Sticky Navigation When User Scrolls

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

jQuery Sticky Navigation Effect

Without further adieu, let’s jump into the code.

The JavaScript

jQuery(function(){
  var menuOffset = jQuery('#site-navigation')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('#site-navigation').addClass('fixed').css('width',jQuery('#masthead').width());
    } else {
      jQuery('#site-navigation').removeClass('fixed').removeAttr("width");
    }
   });
});

Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css('width',jQuery('#masthead').width()). That part of the code is more specific to this site.

The CSS

#site-navigation.fixed{
  position:fixed;
  z-index: 9999;
  top:0;
}

Simple stuff! If you’ve got any questions or need help customizing it to meet your needs feel free to shoot me a line below.

Never fear, WordPress is here! Why to Choose WordPress for Your Site

I do a lot of freelance web development work on the side. From small businesses to large, I’ve done them all. Many of these require the owner the ability to manage their site without the need for a web developer every time they want to make a change. That can get quite expensive for an individual or owner. I find that many times these people believe that getting a customized website built for their company or person can be extremely expensive. My aim is this article is to reach those small business owners and individuals interested in a site and put their mind at ease. The fact is, it can be very inexpensive to get a customized site built. That may be a relative term, but after reading this post, I think you’ll agree with me. I’m going to introduce you to WordPress. A phenomenal content management system (CMS) that will make setting up and managing your own site inexpensive and simple.

I do a lot of freelance web development work on the side. From small businesses to large, I’ve done them all. Many of these require the owner the ability to manage their site without the need for a web developer every time they want to make a change. That can get quite expensive for an individual or owner. I find that many times these people believe that getting a customized website built for their company or person can be extremely expensive. My aim is this article is to reach those small business owners and individuals interested in a site and put their mind at ease. The fact is, it can be very inexpensive to get a customized site built. That may be a relative term, but after reading this post, I think you’ll agree with me. I’m going to introduce you to WordPress. A phenomenal content management system (CMS) that will make setting up and managing your own site inexpensive and simple.

Welcome to the new world of WordPress, no longer just for blogs!

I’m a big believer in what a amazing tool WordPress is to power a website. And before you start thinking it’s only good for blogs, it’s not. WordPress has evolved in the past five years to become a versatile CMS capable of being transformed into a fully featured site. It provides a way to manage the site’s content effortlessly with little to no need of technical knowledge. Here’s just a few popular sites you might be surprised that are running on WordPress:

And of course, another expected benefit of using WordPress is that you’ll have a website and blog all in one working harmoniously together.

Why you should choose WordPress for your site and over other content management systems

Learning Curve for Popular CMS
From CaroLINES blog post, Drupal’s learning curve http://urlnub.com/lCM
When people ask me why they should use WordPress over another content management system like Drupal it’s easy to give them an answer. In addition to the reasons below, I suggest you do your own research and not take my word on it. Google whats better wordpress or drupal and you’ll see thousands of pages and posts praising WordPress over Drupal. Check out CaroLINES blog post, Drupal’s learning curve. Frustrated with Drupal and other content management systems like it, she was inspired to create the graphic on the right.

There’s a lot of reasons why to choose WordPress. With it proven success and easy-of-use it’s makes it an obvious choice. But, just incase you’re still on the fence, here’s just a few of the many reasons why you should be using WordPress to manage your site:

Reason One: WordPress is easy to use and affordable

WordPress is simple to use, affordable, easy to learn and has a great intuitive interface. It makes adding images, videos, new pages, blog posts, and more on a regular basis a breeze. You can even customize it to meet your needs for pages like user profiles, specialized landing pages, calendars and more. The sky is the limit! If you can think it, WordPress can be easily customized to do it, from basic informational sites to full-fledge shopping carts.

Code Is Poetry
WordPress Philosophy, http://codex.wordpress.org/WordPress_Philosophy

Best of all, with a little bit of technical knowledge, you can download and install WordPress for free! You can’t beat that. Most custom systems like WordPress can cost thousands upon thousands of dollars. Worst of all, the money pit keeps getting deeper and deeper for site upgrades, fixes and other changes. With WordPress, you’re using a trusted system, tested and used by thousands of users since 2003. It provides free updates and fixes to security vulnerabilities as technology changes and hackers get more resourceful.

Reason Two: No technical knowledge or special software needed

WordPress lives in the Do-It-Yourself world. You no longer have to wait for a programmer to fix a tiny error for a lot of money. One of the great things about the system is that it’s self-contained and doesn’t require any technical knowledge or special software. You’ll no longer need to spend hundreds, even thousands on special development software like Adobe’s tools. All you need is a device with an internet connection and you’re good to go. Spending days and days trying to figure out how to make your site look the way you want are gone. You can easily create new pages, blog posts, format text, upload media, documents and more all without the need for HTML or FTP software.

Reason Three: WordPress goes where you go, update your site from anywhere

WordPress is internet based, so where ever there’s an internet connection you’ll have access to manage your site. You can even use it on your smartphone! In addition, you can set it up to add new blog posts just by sending it to a email address. It’s key feature is the ease at which is makes it to run your website. While your on vacation, walking the dog, out to dinner or sitting on the pot, if you’ve got an internet-enabled device that has a browser or email client, you’re set!

Reason Four: WordPress offers maximum flexibility to it’s users

WordPress is one of the most efficient and powerful tools for building websites. Built on an open-source platform, it’s simple and easy to make changes from the look of the site to customized functionality like a reservation or booking system. Launching Poptart Cooking was a massive success thanks to the ability to customize the site to fit our needs. With its plug-in feature, you can easily add various applications and tools for improving both the front-end and back-end of your website. There are thousands of great one’s to choose from. A limitless number of site’s like WordPress’s Plugin Directory and CodeCanyon provide an endless amount of WordPress plugins to choose from to meet every need. Most of the plugins only require one click to install and use.

Reason Five: Reach the people you want to reach easily driving traffic

SEO or Search Engine Optimization may sound confusing or even difficult to do. With WordPress, there’s plugins out there built specifically for the purpose of SEO to drive a high volume of traffic to your website. It allows online businesses to get high rankings in the various different search engines like Google and Bing. Higher rankings equals more targeted visitors to your website. It can be one of the best methods when you want to link directly to your customers. Additionally, it saves your valuable time and makes it easy to effortlessly create your company’s website while helping to better manage it in an efficient manner. It’s the perfect content management system for both big and small companies since it’s affordable and brings visibility to business.

A quick look into the features of WordPress

Here’s just a few of the screenshots that showcase the powerful features of WordPress. You can find more on their official site.

WordPress is gaining in popularity by the day and is the platform of choice for many high profile establishments such as the American Government, the CIA, the FBI, the Airforce… and many more.

Is WordPress Scalable? Absolutely!

There’s a big myth out there that WordPress isn’t scalable. That’s absolutely false! Many times the reason the site is having a problem growing are issues with the host, poor server setup and/or poorly coded WordPress plugins. Check out Mark Cahill’s post on WordPress Scalability and what you need to know to make WordPress scale.


In Conclusion

Looking to get a website up fast while being able to efficiently manage it? WordPress is your answer. With a bit of technical knowledge you can install it yourself or pay a small fee to have it professionally installed. I’ve done this personally for many of my clients from the basic install to custom functionality. If WordPress is something that interests you and you’re looking to have a site built, I’d be happy to discuss options with no obligation.

The stumbling block for many people who are desperate to get themselves or their company online is the technical step. With WordPress, it’s never been so easy to quickly set a site up online. With the wealth of free knowledge it makes it easy success launching and managing your site.

Introduce Yourself to SASS and Compass

So you’re a front-end web developer? If so, you probably spend a good portion of your day writing a lot of CSS. I remember those days of copying and pasting over and over again, racking your brain remembering the various vender prefixes, trying to ensure your website is cross-browser compatible, all while doing your best to write solid and clean CSS code.

Ever heard of SASS and Compass? I’ll walk you through how these two powerful tools will be able to speed up development time by doing the heavy lifting for you.

Sass could be defined as a meta-language on top of CSS that helps developers code more elegant syntax for CSS and implements various features that makes building stylesheets more manageable.

SASS & Compass

If code could have relationships, SASS and Compass are soul mates. When I first learned of SASS and then it’s pimp cousin Compass, I was intrigued. In the first couple of projects I worked on where I used these valuable tools, so many of my frustrations were solved. Like magic, I could set some standard site colors and then easily reuse them throughout my stylesheets all while managing that color from a single variable.

Then I came across something called “mixins“. These are analogous to the way many programming languages like PHP work. They let you write CSS in a DRY (Don’t Repeat Yourself) fashion while creating optimized stylesheets that are easier to read, write and edit than the old-school way. Plus with Compass, you’ll have access to several useful mixins which you can quickly incorporate into pre-built CSS frameworks like Blueprint, HTML5 Boilerplate, Susy and more. Even more, you can use them semantically, rather than litter your markup with presentational class names. This is great when working with Drupal theming where it’s not always quick and easy to change classes on elements.

SASS: Syntactically Awesome Stylesheets

SASSOne of the first things that caught my eye when visiting their site was the quote, SASS makes CSS fun again.

Basically, writing SASS is exactly the same as writing CSS… if you so choose. Using the SCSS syntax makes all of your CSS files SASS-ready. The only thing missing is all the exciting features SASS provides. Alternately you can write using the more terse syntax that can save you keystrokes.

Here’s both syntaxes below:

SCSS

Check out how similar SCSS is to CSS. The only thing different here is some variables. This is the method I prefer.

SASS

Tired of those repetitive curly braces and semicolons? They’ve been replaced with a more strict indentation-aware syntax. This method may allow you to type faster and visually scan easier. Both syntaxes are equally functional, so your choice should be based on preference.

Compiled to CSS

Here’s what the compiled CSS from either of the SASS code blocks above:

Install and Setup SASS & Compass

There’s a ton of great resources out there on the web on how to install and setup SASS and Compass. Their own documentation is a great start and should provide you all the information you’ll need to get up and running.

Compass

CompassCompass is SASS built pimp. Without SASS, Compass would be homeless. At the very least, Compass can run in the background and watch when changes get made to your sassy files so it can then re-compile and save it as a production-ready CSS file. That’s awesome and all, but that’s not even close to what this pimp has to offer. Compass allows you to setup your project structure so you can incorporate various frameworks, including your own if you’re a rebel. Out of the box, figuratively, Compass comes with a large number of utility mixins and the popular Blueprint CSS framework. That’s a lot of bling already, but mosey on over to GitHub and check out the other awesome goodies that people are working on. 960.gs, Susy, HTML5 Boilerplate and a whole lot more are already waiting for you to play around with. In addition, there’s a number of plugins you can incorporate that were created to perform certain specific tasks in CSS. Fancy Buttons is just one of the many plugins that provides a easy way to add progressively enhanced CSS buttons. Another is Lemonade which allows you to compile all of your .png background images into a nice, tidy sprite file.

Variables

One of my favorite features of SASS is the ability to use variables. Variables you say? Yup. It’s incredible that this isn’t already available is plain ‘ole CSS, because it’s so simple and yet powerful. I did a presentation at my job on using SASS and Compass in a new project we were starting. The first thing I heard about SASS was, “Whoa, now I don’t have to remember hex numbers for all my colors!” Or something similar to that. Here’s an example below using variables and functions to do things like change colors.

$my-red: #b80000;
$my-dark-red: darken($my-red, 10%); // renders as #410101
$my-muted-red: desaturate($my-red, 40%); // renders as $5c1919
$my-transparent-red: transparentize($my-red, 0.5); // renders as rgba(115, 2, 2, 0.5)

It doesn’t stop at colors either. SASS variables can be used to store pretty much any value you’ll need to reuse.

$vertical-margin: 24px;
$horizontal-margin: $vertical-margin * 0.5;
div.container {
  margin: $vertical-margin $horizontal-margin;
}

// Renders as:
div.container P
  margin: 24px 12px;
}

Mixins

Mixins are one of the most powerful features of SASS. Mixins allows coder’s to reuse entire snippets of code and even interject logic while doing it. This gives you reusable and flexible ways to style your markup. You’ll be using mixins everywhere, but let’s start by looking at humble html lists. We use lists in html almost as often as we use div’s. They’re versatile, and therefore are often the best semantic element for a given piece of content, be it a menu, a tag cloud, or upcoming concerts.

Let’s look at the mixin for removing bullets from lists that is included with Compass.

Defining the Mixin

This is where we write the code we want to apply to multiple places. This example happens to be included with Compass but you can easily write your own.

// REMOVE BULLETS FROM A LIST
// Turn off the bullet for an element of a list
@mixin no-bullet {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}
// turns off the bullets for an entire list
// NOTE THAT THIS MIXIN NESTS THE PREVIOUS ONE ON ELEMENTS
@mixin no-bullets {
  list-style: none;
  li {
    @include no-bullet;
  }
}

Including the Mixin

This is how you apply the mixin as you work.

ul.my-list {
  @include no-bullets;
}

Or you can use the shorthand syntax:

ul.my-list
  +no-bullets

Rendered CSS

ul.my-list {
  list-style: none;
}
ul.my-list li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

Mixins are also used when implementing a CSS framework in Compass. My main problem with implementing the increasingly numerous CSS frameworks is that in order to apply the predefined styles you need to use presentational class names in your markup like, span-6. I used to use them anyway in order to gain the other benefits, but it always tasted funny. Mixins are a huge part of overcoming that hurdle. Since mixins can accept arguments we can use them to calculate an element’s width and other properties, and apply those properties to semantic classes. So if your CSS framework has a set of styles that make an element 6 columns wide, set a margin, and float it to the left we can now write a mixin that can be applied to any class. What’s more, we can make that mixin dynamic so that it can calculate that width and margin instead of just dumbly spitting out static declarations. Mixins are part of the reason SASS and Compass make the perfect pair.

The documentation on compass-style.org is probably the best place to take a look at the code.

Extend

@extend is the new kid on the block, having recently been developed for SASS version 3, and honestly I’ve only recently started to understand it well enough to know when it’s the right tool to reach for. It’s pretty simple to grasp the concept. Sometimes you write a style for an element, and then you want to apply that style to something else, but add a little more to it. For example you might have a call out, and then want to position it on the left or right of the content.

SASS

$horizontal-margin: 18px;
$padding: 6px;
.callout {
  border: 1px solid black;
  padding: $padding;
}

.left-callout {
  @extend .callout;
  float: left;
  margin-right: $horizontal-margin;
}

.right-callout {
  @extend .callout;
  float: right;
  margin-left: $horizontal-margin;
}

Rendered CSS

.callout, .left-callout, .right-callout {
  border: 1px solid black;
  padding: 6px;
}

.left-callout {
  float: left;
  margin-right: 18px;
}

.right-callout {
  float: right;
  margin-left: 18px;
}

Stay Sassy, Austin

SASS and Compass has been added to my arsenal of web development weapons and should be in yours too! Since I’ve started using these two powerful tools, I’ve become spoiled. Give it a try on your next project and you will be too. Here’s to SASS and Compass, the perfect relationship.

CSS4! But, I Just Learned CSS3! A Sneak Peek Into CSS Level 4

[dropcap type=”v2″]H[/dropcap]ave you heard? No, bird is not the word, it’s CSS4. It’s starting to become a hot topic around the web development water cooler. Some of you may be thinking, Great, just when I started to get the hang of CSS3! Well, if it helps any, technically there is no such thing as CSS4. It’s little comfort I know, but you really should be excited. As a front-ender, we should all rejoice when progress is made even if it’s smelly IE crawling past simple milestones like rounded corners (thanks IE 9, about time!). When progress is made, it brings us new exciting tools to add to our development kit, making our life easier and bringing the quality of websites to that next level. CSS is going to that next level with 4, shouldn’t your site?

Continue reading “CSS4! But, I Just Learned CSS3! A Sneak Peek Into CSS Level 4”

Object-Oriented CSS for High Performance & Cleaner Code

There’s a common phrase that get’s tossed around all the time in the web development world, object-oriented programming. Usually when brought up, it’s in context of some back-end language like PHP, but what about for us front-end guys? Can we take this concept and apply it to the ever-changing landscape of CSS? The answer is yes, we can! And doing so will turn your CSS markup into a lean, mean and clean high performance styling machine. Let’s dive into object-oriented CSS!

There’s a common phrase that get’s tossed around all the time in the web development world, object-oriented programming. Usually when brought up, it’s in context of some back-end language like PHP, but what about for us front-end guys? Can we take this concept and apply it to the ever-changing landscape of CSS? The answer is yes, we can! And doing so will turn your CSS markup into a lean, mean and clean high performance styling machine. Let’s dive into object-oriented CSS!

Why should I care about Object-Oriented CSS?

Great, just what I needed, another new best practice concept to learn. Everyday it seems like there’s a new “best practice” idea you should be implementing in your project. So why should you use OOCSS and is it going to stick around?

There’s a couple of good reasons why as a developer you will want to write your CSS in an object-oriented way. Another common phrase thrown around in the web development world is “reusable” and the first reason why you should write OOCSS. In addition, making your CSS reusable will inevitably make your stylesheets become much smaller and easier to manage. OOCSS should make changing the design of your site easier.

You’ll also gain peace of mind when writing your styles this way. How so you ask? It will be mush easier to change parts of your site without breaking it. Keeping your CSS object-oriented enables you to change your site consistently.

Object-Oriented Programming, an easy concept to grasp

Object-oriented programming isn’t a new idea, it’s been put into practive since the late 1950s starting at MIT in the environment of the artificial intelligence group. According to Wikipedia,

Object-oriented programming (OOP) is a programming paradigm that represents concepts as “objects” that have data fields (attributes that describe the object) and associated procedures known as methods. Objects, which are instances of classes, are used to interact with one another to design applications and computer programs.

In layman’s terms, OOP is the practice of making your code reusable, efficient and fast. So how do we apply that idea to CSS?

Make Way for OOCSS!

Object-Oriented Cascading Stylesheets or OOCSS for short introduces object-oriented programming to the wonderful world of CSS. OOCSS, at its core, is simply writing less and cleaner CSS. It’s not a different language: still the same old CSS we all know and love. It’s just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

I first learned of OOCSS from Nicole Sullivan (worked on the high performance team at Yahoo!) when I watched her presentation, Object Oriented CSS: for high performance we applications and sites. If you have about an hour, I’d highly suggest watching her presentation because she does a great job in explaining OOCSS and how to implement it. To understand OOCSS, you need to understand it’s two main principles: Separation of Structure from Skin, Separation of Containers and Content.

OOCSS: Separation of Structure from Skin

I never went to college for web development or programming so I’ve never liked those long, big-worded explanations about what certain terms or concepts meant. So I’m going to try my best to break it down for the layman’s like me out there. Separation of structure from skin basically means you put the layout classes or the classes you create to position regions on your webpage like grids from the visual features of your site or your site’s skin. Think of the structure like the foundation and wood framing of a home and the skin as the paint, wallpaper and other ascents. I’m more of a hands-on learned so here’s an example:

CSS before Implementing OOCSS

Here’s a block of CSS before any OOCSS concepts are applied to it.

Take a look at the CSS above. It’s valid CSS, however it could be optimized and made reusable using the OOCSS concept. Currently it uses non-reusable ID selectors to define styles. If you take a closer look, you’ll also notice they have a number of styles in common. Those common styles may be required to be consistent with the product or company the website represents.

CSS after Implementing OOCSS

With a little bit of planning and forethought, we can abstract the common styles so the CSS would end up looking something like this:

Now all the elements are using classes, the common styles are combined into a reusable “skin” and nothing is unnecessarily repeated. We just need to apply the “skin” class to all the elements and the result will be the same as what the first example would produce, except with less code and a possibility for further reuse.

Something to keep in mind…

When coding OOCSS, it’s important to make all styles you create as generic and adaptive as possible. A general rule of thumb is to try and never use defined widths and heights. The content should be able adapt accordingly while keeping the same look. This is true for most all styles in OOCSS.

For instance, let’s say you have a widget container inside a right column container. The right column container’s width could depend on a number of factors from the user’s screen size to the page type. You’ll need the widget container’s width to adjust accordingly so it fills all the horizontal space in the right column. In the example above, we’re defining the widget container’s width which wouldn’t allow it to adjust accordingly. Instead, if we left out the width definition in the widget class, it could dynamically fill all the horizontal space in the right column container. Make sense?

OOCSS: Separation of Containers and Content

The second principle of OOCSS is the separation of containers and content. We should rarely use location dependent styles, because those styles then become locked into specific selectors. The “skin” of an object should look the same no matter where it’s located. Take a look at the example below:

The style above locks all h3’s that appear in the sidebar container to a certain look. Also, this approach doesn’t allow the use of this style in other sections of the site like the footer. But what if we want to apply those exact same styles to h3’s that appear in the site’s footer with the exception of a different font size and a modified text shadow. To accomplish that there will be some duplication of code, see below.

I’m sure the above looks familiar. I’ve written css like this and I’m sure you have to. The code above now unnecessarily duplicates styles, BAD! But now with OOCSS, more forethought is required to figure out what is common among different elements. Then you must separate those common features into modules or objects that can be reused anywhere on the site. Doing this avoids the problem of needing to overwrite styles over an over again to achieve the desired result and avoids creating specificity issues.

Here’s a real world example. On the project I’m currently working on, we have default list stylings, another set of styles for our global navigation list and yet another for secondary navigational lists. Later on, we may want to add even more random lists that could appear in a sidebar or footer. The old way of doing CSS is to write what your default styles will be and then override those styles for the various different lists. This can get overwhelming, hard to manage, and cause code duplication.

To combat that, we spent a little bit more time upfront thinking about the common elements that will appear on the site and then abstracted those commonalities out into reusable modules. We didn’t attach our modularized classes to specific elements so it will allow us to add the box styles to any container.

The Bottom Line on Object-Oriented Cascading Stylesheets

I’m famous for saying, just give me the bottom line. Well here it is for object-oriented CSS, some simple guidelines to follow when implementing the OOCSS concept in your next project:

Object-Oriented CSS Guidelines to Follow

  • Avoid the descendent selector (i.e. don’t use .sidebar h3)
  • Avoid IDs as styling hooks
  • Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)
  • Except in some rare cases, avoid using !important
  • Use CSS Lint to check your CSS (and know that it has options and method to its madness)
  • Use CSS grids

For the Overachievers

Being in the IT industry, I know there’s many of you that eat this stuff up like it was candy. For the dedicated out there, here’s some additional resources you can use to learn more about object-oriented CSS. I would also highly suggest following Nicole Sullivan if you want to continue learning about OOCSS. In addition to posting articles regularly on object-orientated CSS, Nicole has done a number of presentations with accompanying slideshows. Here’s some that I would suggest checkout out:

A Little Extra on Object-Orientated CSS

Nicole Sullivan gave a talk at An Event Apart in Boston, MA on Object-Oriented CSS. She shared ways to optimize CSS code and why performance matters for websites. Here’s some of the important points worth mentioning:

Performance Matters

  • Yahoo! 5-9% drop in full page traffic from an added 400ms
  • Google lost 20% of searches from an added 500ms
  • Shopzilla improved Website performance by 3.5 seconds and conversion rate went up 7-12% and page views went up 25%
  • Bing and Google added added 200ms to a page it took people 500ms to make a first click. People get out of their flow when performance degrades
  • Over time, as you slow down user experience, people’s interactions get worse and worse. Even when people’s performance gets improved, if you lost them before, they may not come back. Build performance into your process.
  • Active users are the ones most impacted by performance. Time to click is two times worse than the delay was. Your users care about performance.
  • The biggest thing you can do to improve performance is reduce file size and number of http requests. CSS is a factor in both of these. We have to do CSS right.

Issues with CSS

  • CSS code is too fragile -even the cleanest code can get ruined by the first non-expert to work on it. CSS requires expert ability to just get started.
  • Code re-use is almost non-existent. Most people start over when writing CSS.
  • Because of these issues, file size just keeps getting.

Cascading CSS

  • Browsers all have default styles. All these internal style sheets are different. A CSS reset sheet can make things equal across browsers.
  • Browsers ignore code they don’t understand. Invalid property values are skipped.
  • The order of classes does not guarantee which one will be applied first.
  • The last property value pair in a CSS declaration is the one that applies.
  • The order of style sheets also matters. The last style sheet wins.
  • CSS inheritance: properties are inherited by child elements. For example, paragraphs inherit the font-size of the body.
  • IDs win over classes. Inline styles win over external style sheets. !important wins even over inline styles.
  • Avoid ID, inline and !important when styling elements. This allows cascade order to determine the winner.
  • You can use the cascade ordering of styles to save code and improve performance.
  • Avoid applying styles in a “.message.error” manner. This causes issues in some browsers.

How to Optimize CSS

To optimize CSS: reduce duplication and improve predictability (don’t change expectations based on where the component is).

  • Analyze how much duplication there is.
  • Find simple solutions. Problems may seem complicated but that does not mean they necessarily are. Determine what you can know about each object and determine what you can’t know.
  • Simplify specificity: use hacks very sparingly and in way that does not impact specificity.
  • Avoid styling IDs: they impact specificity and can’t be re-used
  • Avoid styling elements: style classes instead
  • Avoid !important :except on leaf nodes
  • Give all rules the same strength: use cascade order to overwrite previous rules.
  • Reuse elements: this makes them performance “freebies”

Wrapping Up

I know there’s probably a lot of you out there that fear the OOCSS ideology because it appears to go against a lot of the so-called “best practices“. Never fear! Once you understand the benefits of using OOCSS, I have no doubt that you will convert.

Even though there are new frameworks, best practices, concepts and technology coming out daily, I think overall object-oriented CSS will stick around in the future of CSS development. I strongly believe it’s a concept that all developers from back-end to front-end should incorporate into their projects.