{Carrer web log}

Write modern CSS - use class

Tuesday, May 31, 2011 { 10 Comments }

Lately CSS community is focused on the new CSS3 tricks and more essential topics like CSS Layouts are left in the dark.

Many thing changed but we still using ID's for direct styling. Meaning we have #header, #footer, #navigation, #main … and we apply styling on that Id.

What is wrong with this code and approach? There is nothing wrong with HTML it is perfectly semantic and logical. The problem is the CSS.

You all have seen CSS like this:



and HTML





Example ID

We are directly using the ID for layout. But we forget that ID can be used once and only once.

That is not flexible!!

For every building block (DIV) we must write different ID. If we have 1000 blocks we must write 1000 different ID.

Why don't we start using class, write it once use it multiple times.

Here is the second example with the same HTML but different CSS. Note that this model supports semantic coding. We are using ID to give logical and semantic areas to HTML bit we are using the class for all the styling.



And the HTML:





Example with class

But this system really shines when we have one block that repeats many times.

Let's build Photo Gallery Example.

Image Gallery using ID's

Image Gallery using class

View the source code of the last two examples.

And we have 2 lines of code for the layout using class v.s 9 lines of CSS using id's.

I think that is more then obvious that with the class we can write less code.

Why don't we try to extend the second example and build extend layout system.



And the we have our own CSS Framework.



The Example CSS Framework.

Someone will ask: What about the speed of the execution.

According to this tests class perform better than ID on most modern browsers. Unfortunately I'm getting inconsistent results for every measure. So I will be happy is someone can confirm my statement.

Final thoughts:

The point of this article is that the class is more flexible than id. Effectively you can write less code with class-es. You can always use semantical HTML and ID with the combination with class if you like.

And the final thing there is no wright or wrong coding method. The wright method is the one that works for you. This is the method that I prefer.


Your comments and thoughts will be appreciated.

Event Delegation - JavaScript

Monday, May 23, 2011 { 6 Comments }

I'm making a small JS library for building mobile apps that should work on webkit browsers Safari, Chrome. One of the problems to solve was how to implement event delegation.

What is event delegation? I think that very good explanation has David Walsh on his blog post about event delegation and the explanation how various libraries implement event delegation.

So if you are using jQuery you probably know .delegate() and .live() method. Basically what you trying to achieve is to have just one addEventListener that covers big area like the body, table or other portion of your code and avoid to have multiple addEventListener's. I think the .live() method in jQuery have one addEventListener positioned on the body HTML element.

My intention was to build simple yet flexible solution that will work on all modern browsers.

The basic code is:



And the final function:

The trick is to check if the selected("event.target") element matches the selection array($("something")) by using the indexOf .



In order this solution to work you need to remember to select the deepest HTML elements: Example <div id="some"><span><a href="">Click Me</a></span></div> you should indicate in the SelectorChild $("#someid>span>a");


All of this is possible because is the modern browsers we can querySelectorAll and actually the SelectorEngine can be just one line of code.

See working example of first and second example:

FirstExample
SecondExample

I did tests on Firefox4, Safari5, Chrome13, Opera11 and mobile Safari on IOS4.3 .

I think that many heads are better than one. Help me improve the code. Just one condition it should work on Safari and Chrome.

The code can be found on GitHub:

https://gist.github.com/985999
https://gist.github.com/986000

Thanks.

Baseline Grid patterns for Photoshop and CSS

Wednesday, May 11, 2011 { 0 Comments }

Few days ago I stubbled upon on Extensible baseline grids by Mike Precious via @adactio.

I've used the same technique several times for building .PSD Golden Grid Template and for web typography parts of Emastic, Better Readability Project, Azbuka and others project that all use complete or partial Baseline Grid.

I thought that can be handy to build Photoshop .pat pattern file for my future baseline grid projects. Also I made .png images that can be used with CSS (HTML) for building and testing the baseline grid.
I think that this can be useful to someone so I am sharing my Photoshop and .png files.

The patterns are from 14px to 26px feel free to extend the project and add more patterns.


Download the patterns (baseline.pat and .png files)

To install the Photoshop patterns you need to copy the baseline.pat file to the folder Photoshop>Presets>Patterns and then restart Photoshop.

For HTML(CSS) patterns open index.html file with any browser.

Cheers!