An Introduction To Object Oriented CSS (OOCSS) - Smashing Coding. Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort.
Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. From a Web developer’s perspective, however, some may argue that speed is king1. Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas5. In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.
The Principles Of OOCSS Link As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. Validate your whole website with one click! (woo hoo!) 24 ways - web design and development articles and tutorials for advent.
Writing maintainable code. Three years ago, I gave my first talk at Yahoo!
Entitled, Maintainable JavaScript (slides). The point of the talk was to encourage people to use more rigor in their JavaScript coding. A lot of people who write JavaScript for a living began as hobbyists and hackers, including myself. All of the best front end engineers are self-taught, of course, because this stuff hasn’t been taught in colleges and universities.
I took the opportunity to simply point out that the same coding practices that are taught in traditional software engineering programs can also be applied to JavaScript. What is maintainable code? In the presentation, I said that maintainable code has the following qualities: UnderstandableIntuitiveAdaptableExtendableDebuggable I’d also now like to add “Testable” as a sixth quality of maintainable code. Confusing code doesn’t embody these qualities and makes everyone’s job harder. It’s hard to uncover confusing code without context. Devedge Sidebar. Resources for Web Developers. Box Model Hack. Boxtest Here is a sample div with class "boxtest".
It has 20px border, 30px padding, and 300px width. The total width including borders and padding should be 400px. User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px. The red and blue bars below are there for comparison.
Content Here is a sample div with class "content". This div is styled almost identically to the "boxtest" div: with one important addition. This div (including its borders) should also be as wide as the blue bar, even in IE5/Windows and IE5.5/Windows. In addition, we add one more rule immediately following the above style rule, to help out UAs which support CSS2 selectors and the CSS box model, but have the same parsing bug as IE5.x/Windows mentioned above. This paragraph has class="ruletest" and thus should be colored blue. Addendums Avoid the unnecessary ? Since the ? Semantic XHTML. Designing Web Sites for Older Adults: Heuristics. HTML - Kit : resources for web developers. ASCII Codes.
Breadcrumbs for All by Martin Burns (Perl/Apache/Unix) Transparent PNG or GIF rollover. Index of the HTML 4 Elements. Web Page Design for Designers - Colour. The next couple of pages are about palettes.
Colour palettes were very important in the early days of the Web when most people used monitors that could only display 256 colours or less. These systems are now becoming increasingly rare and the dithering problems associated with restricted palettes are gradually disappearing. Popular statistics sites now show that the instance of 8-bit monitors has dropped below 10% of total Web users. So, you only need to be concerned with palettes if you suspect that your readership, for some reason, is still using older systems. Having said that, having thousands of colours to choose from can be very confusing. If you don't really care about the ins and outs of 8-bit palettes, you can skip this section and go to a page about the more practical aspects of colour theory. What you see on this page depends on which colour depth your monitor is set to. In 16-bit or 24-bit, all the images will look about right with only subtle differences.
Beyond 8-bits Note.