7 ways to tell your css has gone mental

I work on big sites almost exclusively so my techniques are all about wrangling tens of thousands of lines of code into a few thousand. When deadlines loom or you work with a staff of various skill levels css begins to loose its organization.

So here are a few things to look for to know its time to reorganize your code.

  1. When !important becomes a way of life. When the only way to get a piece of code to to work is to wrap !important to the end of every line, your css has gone mental.
  2. When you scroll through the style definitions and see !important sprinkled liberally throughout the styles. Your code has definitely gone mental. Seriously if there are so many clashing definitions that only an !important can solve it you need to look into taking a BEM and SMACSS approach and flatten your definitions.
  3. If you need to change a color and have to do a find and replace to get to them all your code has gone mental. It is time to preprocess your css. I prefer Sass just because it has super powers, but Less is almost as good. Preprocessors allow you to use variables so you can keep all your definitions in one place and reference it everywhere.
  4. If additions to classes end up in a jumble at the end of a file it has gone mental. Choose a technique that makes it easy to find the classes that you need to change. Preprocessors allow you to break your styles into as many files you need to keep your css organized. Sass to the rescue again.
  5. When style definitions are nested five levels deep you know your code has gone mental. Use BEM naming conventions and ideas to flatten your styles and give all your elements a class name.
    Distinct modules should be able to live on any page in any location and maintain their styling. Doing this will help break your code down into manageable chunks.
  6. When the the slowest part of your site is how fast it renders the styles you know it has gone mental. When styles get too complex it can slow down the site and leave it hug half broken till it finishing going through all the exceptions from the nested rules. Again flattening your rules and proper naming would go a long way toward resolving that. BEM has helped me organize my code into something a bit more manageable over the long term.
  7. using # over . will drive your site mental. Specifity will ruin your day ,but adding IDs among your definitions will just overpower any classes and make fixes that much harder. Avoid them on anything but page structure. Using IDs on modules may be moved to new pages will just confuse things when duplicate IDs start showing up on the same page. It will render but it may break js and cause conflicts when there is an ID and a class, but you are only working on the class. Consolidate styles into just the classes helps that.

Here is a great talk about organizing CSS using OOCSS, SMACSS and BEM and SASS. OOCSS has been absorbed into SMACSS and BEM principles so it isn’t mentioned as much any more.

Create a facebook feed for your website

In order to get your facebook feed follow these steps.

first go to:


Click +Create New App
fill in an app name. ignore the rest. Click Continue.

fill in the security word to get to the next screen.

On this screen you will see a form for creating your app.

fill in App Domains with the URl of the site that will show the feed.
Click the Website with Facebook Login.
fill in the url including the http:// before the site.

Click Save Changes

Once this is done you will need to copy your APP_ID and APP_SECRET codes

Go to this link replacing APP_ID and APP_SECRET with the actual codes.


when you go there you will get a page looking like this:

your access code is everything after the equal sign. save this code.

next you will need the page name.

go to facebook and go to the page you want the feed for.

for instance to use the feed from this page:


you will use the page name: jasonmcalpin

go to the following URL replacing PAGE_NAME with the actual page name. Add the access_token to the end after the equal sign.


congratulations you now have the JSON feed for your page.

In the next post I will take you through styling it.

Internet Explorer 7 Compatibility Mode

Well Internet Explorer 9 is finally here and we will now have to code for it. If you’re like me working in a production environment then most likely it is more of a hassle than a blessing since IE 6 through 9 are still out there.

The best practice is to code for the widest compatibility which, for internet explorer, is IE 7. I left out IE 6 since even Microsoft is trying to get rid of that albatross.

There is a piece of code you can add to your website to force later versions of Internet Explorer to only view the webpage as IE 7. It uses something called compatibility mode.

Internet Explorer 7 Compatibility Mode.

this is the code:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

place this with the other meta tags in the HEAD of the web page.
If you want to test if the page is actually using the correct view mode type the following code into the address bar. (if you paste it some of the commands will disappear so watch for that.)


ActionScript Functions

Here are a few tips when using functions in Flash.
function callMe(){}

object.variable1 = callMe();
object.variable2 = callMe;
There is a big difference in how a function works depending on if () are used.
When you use () with a function you are calling it, at which point it runs its code and returns any values. When you do not use () it assigns the function to the variable name. The variable name will then be able to be used to call the function.

imbed your flash fonts

Flash allows you to imbed the fonts along with the rest of your media. This makes sure everyone working on the file has the same font. It allows Windows and Macs the same access to the flash file. Even more importantly it allows you to name the font so that you know its usage. Even more importantly than that is if you need to revisit the file months or years later you can be confident that all the pieces you need to work from that file are included.

To add a font in Flash do the following steps.

  1. Open your Library.
  2. Click the drop down in the upper right of the palette.
  3. Click New Font…
  4. A window will pop up where you can name your font. Personally I name them by their usage, such as page_header_arial_bold or drop_down_menu_eurostyle_ext. It’s always a good idea to use descriptive names in case you need to come back into the file months later.

Thats all there is to it. Now go forth and build brand new flash files confident that you will never loose the font