Category: CSS
-
Top 5 Mistakes of Massive CSS
Last week, Stoyan Stefanov and I spoke at Velocity Conference about optimizing massive CSS. We talked about our experiences optimizing large-scale sites like Facebook and Yahoo!, and we discussed our findings regarding the CSS efficiency of the Alexa Top 1000 websites. Velocity was kind enough to share videos of the session. What is the state…
-
The media object saves hundreds of lines of code
What is the internet made of? At least the UI layer is mainly composed of media blocks. I talked about the Facebook stream story before, and all the tiny objects of which it is composed. For the most part, the stream story is made up of the media object repeated over and over. The media…
-
CSS Variables Specification
I don’t want CSS to become a programming language, but I do want it to be a better declarative language. I would like to see variables added to the CSS Specification. People have been begging for Variables or Constants in various incarnations forever. Variables will help us do more with less code. It is time…
-
How to create CSS objects? Get the granularity right!
In my previous post, I said: Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP. And then I didn’t expand on it, or give proper context. Ooops, sorry! In the…
-
Visual Semantics in HTML and CSS
Each layer in the web stack has its own architecture. You wouldn’t expect the DB schema to be used to architect the PHP middleware, and yet people expect that of the HTML and CSS. HTML needs to be written with a sense of the meaning of the data or content, something I call code semantics.…
-
CSS Wish List
Don’t get me wrong, I think CSS is awesome. It is a great way of defining the UI, but it could be even better. I’m excited about the special effects, transitions, and graphic elements currently being added to the CSS specification. They will help us write faster pages by eliminating the need for UI graphics…
-
Overflow – a secret benefit
Overflow does some cool things you should know about. Creates Block Formatting Context Clears Floats Generating block formatting context Arnaud Gueras called this “contexte de formattage” years ago, and I was kind of surprised when I moved back to the US how few developers here had heard of this “secret weapon”. When the overflow property…
-
CSS Summit – test cases for browser bugs
Speaking the CSS Summit today, I listened as people voiced concerns about browser support and bugs. It might surprise my fellow CSS developers, but many of the seasoned, bearded (ok, I’m making this part up) engineers working on the innards of browsers and rendering engines may not actually write much CSS themselves. They need our…
-
The Year of Business Metrics – Don’t make your users run away!
A marked change has occurred since the first Velocity Conference a year ago, and while the effects are not yet obvious, they will be. The web is still slow, but we have something now, that we didn’t a year ago: business metrics. This was the year we quantified the impact of performance choices on our…
-
Reflows & Repaints: CSS Performance making your JavaScript slow?
I’ve been tweeting and posting to delicious about reflows and repaints, and it seemed time for a blog post. Opera lists repaint and reflow as one of the three main contributors to sluggish JavaScript, so it definitely seems worth a look. Reflows are very expensive in terms of performance, and is one of the main…