After reading an article about OOCSS (Object Oriented CSS) I was left a little numb and confused to be honest. I’d advise you read the full article before reading what follows.
The idea is fairly simple – write your CSS using a “bottom up” approach, as opposed to a “top down” approach, treating your elements as “objects”, using mainly classes, as opposed to IDs. The idea of this is to make classes more reusable and to encourage a greater css granularity architecture. The overall theory behind OOCSS is something I don’t dispute in the least, if anything it’s simply good practice when writing a CSS file.
For me, the whole article borders on the pedantic to the outright pretentious.
Firstly, I’m not a fan of the name. “OOCSS” implies a link to OOP (Object Orientated Programming), which it is not. I can see why they’ve named it OOCSS as I guess multiple classes could be similar to inheritance, an element on your page as an “object”, classes imply reusability etc. As a web developer, who uses OOP I was instantly put on the defensive, thinking “OOP for CSS, wtf”. I understand the name is simply a paradigm, but it sends out all the wrong signals for me personally.
Apologies if this article turns into a bit of a rant…..
Content source ordering or SOC (source ordered content) is the idea that content nearer the top of the raw HTML source code has greater weight and meaning for search engines. For instance, a paragraph of text right at the top of the HTML source has more meaning than the same passage that may appear in the footer. It is very useful for those all too common generic menus (home, about, contact etc.) that has no SEO benefit at all, yet appears at the top of every page of your site. With SOC and absolute positioning of DOM elements, it is possible to position this HTML at the very bottom of the source code, thus gicing greater weight to your page content.
The latter is not a new idea by any means, but is generally considored to be a positive practice to implement on any site.
the client must be able to upload their own banner images
the banner image was not square and had a transparfent mask around over it (in Photoshop, the banner image was underneath a clipping mask)
The design must function in a range of legacy browsers
This presented a major headache. Usually uplaoding a totally square image is easy – a client can do this with ease themselves. However, the client in question has no experience using using Photoshop (and why should they to update their website?) and wouldn’t be able to upload a masked image. Additionally, using some of the new CSS3 image masking properties are out, as I need to support IE6 and above.
So, the solution here is to use a transparent image to overlay the square image – meaning a client can upload a square image and have it show masked on the live website – see the final result of what we’ll be making.
I was recently browsing a few photography website and came across a quite slick way to display a small snippet of information for for an image gallery. Unfortunately, it was Flash based, so I attemtpted to mimick the using only xHTML and CSS.
After browsing through a a few web portfolios lately I’ve noticed a rather noce efefct – whereby when the user hovers over a thumbnail an image appear – this may be a zoom icon (for images) or a play button (for videos). In thus article I’ll quickly run through the simple steps on who we create a a funky css hover effect image gallery. This is a very useful technique for any sort of site that display thumbnails links.
The CSS is simply sets the image’s position absolutely (to ensure nothing gets pushed out of line).
The give the show effect a nice fade in style and in order the show our hidden image I’ll add a small piece of JQuery that finds the image within our span tag and fades it in. The latter is done when the user hovers over the image, when the mouse leaves, the image is hidden again. The folllwing would go within the head tag (I’ve also let Google CDN host my JQuery file):
In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL, Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):
Youtube, does things slightly different and uses a absolutely massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.