Monday, July 18, 2011

Patterns

Just a couple of links today (more details to follow).

I found a great reference for JavaScript and jQuery Design Patterns here:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Also, I learned about the Presenter pattern today. We were having a discussion at work about what to do with presentation logic in Rails. On the one hand you don't want it in the controller because you want to keep your controllers thin, on the other hand you don't want it in the models either because it's presentational. You can't put it in the erb because they shouldn't contain logic. Enter the Presenter Pattern:

http://donttrustthisguy.com/2008/05/29/using-presenters-in-rails-3/

http://blog.jayfields.com/2007/03/rails-presenter-pattern.html

Enjoy your homework!

Wednesday, July 06, 2011

What is !important?

In CSS, you can override a style on a class simply by declaring a new style further down the page

i.e.

p {
padding-top:5px;
}

p.custom {
padding:10px;
}

Basically the above code sets the padding-top on all paragraphs to 5px, but sets the padding to 10px on paragraphs with the "custom" class. So we are overriding padding on our custom class.

However, you can actually prevent an attribute's style from being overridden if for some reason you really really don't want the padding to change in your design. Perhaps you are working with multiple people and you really don't want someone to accidentally override your design. Perhaps you just want to ensure your padding-top is always 5px even if padding is reset somewhere else.

In order to do this we use !important.

p {
padding-top:5px !important;
}

p.custom {
padding:10px;
}

In this case, the padding-top on a paragraph will always stay at 5px regardless of whether or not it has a "custom" class. It will also stay at 5px if you do the following...

p {
padding-top:5px !important;
}

p.custom {
padding:10px;
padding-top:10px;
}

However all is not lost. Let's say you have imported someone else's CSS library and you want to tweak it but you find that they have used !important on the one style you want to update? Just use !important yourself...

p {
padding-top:5px !important;
}

p.custom {
padding:10px !important;
}

Yay! You can play in God mode too!

Of course in general it's best to avoid !important in every day situations. It's not really best practice, but it's there should you need it...