CSS
Wednesday, July 31st, 2013
Recently I did a quick talk at Sydney Web Apps meetup about block formatting context, focusing on how it changes the way it interacts with floated elements. I first learnt about this “secret weapon” via Nicole’s blogpost but it wasn’t until recently that I really understood how useful it is. In my talk I talked about how we use this technique in the OOCSS open source project, using media block, grid and template as examples in my slides.
P.S. Feels rather weird to hear and see myself on video! *cringe*
Posted in Geek, General, oocss | 3 Comments »
Monday, July 1st, 2013
I love rem. I’ve been using it since I first read about it in Jonathan Snook’s article, and even more so since I started building responsive websites.
So what is rem?
Rem is a value that is relative to the root font-size, meaning the font-size that is set on the <html> element. The browser by default sets the font-size at the root to 16px.
There are some articles around about why rem is good and super handy, so I won’t go into too much detail here. But in short, rem is awesome because:
- It works like pixels in that you don’t get compounding issue like you do with em and the computed value is always the same no matter where the value is set.
- It is better accessibility wise as it can be scaled like em, so users can resize the text on the page.
- In responsive design, you can set a different font-size on the
<html> at each breakpoint and the text on your site will scale proportionally according to your root font-size.
Posted in CSS, Geek, General, oocss | 11 Comments »
Wednesday, June 5th, 2013
I recently spoke at JSConf about my experience working with Trulia to create a living style guide. The goal for the project was to improve performance, team velocity, and also to have a more consistent design. It was such a fun project (because their engineers were great to work with) and also successful on all three fronts. Here are some of the metrics for the data-lovers:
- Their HTML is 48% smaller
- 21% faster load time
- 60% faster time to first byte
- Reduced unused CSS by 135kb
- Search results page views increased by 11%
- Property detail page views increased by 3% (this page was not changed, changes on the SRP alone account for this figure)
- Click throughs, leads, customer satisfaction, and filter use also improved
I’ll be speaking at Velocity Conference in a couple weeks where I’ll go into more detail about the Sass magic that made this possible. :)
Posted in CSS, Design, Geek, oocss, Performance | 7 Comments »
Tuesday, February 5th, 2013
CSSConf – This is your conference.
Last week we invited the CSS community to submit talks for the upcoming CSSConf (May 28th, Amelia Island, FL).
The CSS community has an excellent history of curated conferences, and yet we want to do something a little bit different. We want to see what you have to say! What do you think is cool? What are you working on that you would like to share with the community? We decided to do a Call For Proposals because we wanted to balance curation with community.
Some folks may not be familiar with a CFP. It comes from the scientific community, when scientists would submit a proposal to present their work to their peers. The scientists with the most interesting abstracts would then be chosen to display a poster describing their work at a conference.
We decided to build on this model because we firmly believe that the community is doing amazing things. We are excited to hear about them, and to help you share your work with others.
Choosing the best talks
We are following the JSConf EU method so that we can choose the absolute very best proposals that come in.
The most important part is that we have eliminated all identifying details when we are evaluating the quality of your proposals. We won’t see your name, your company, or whether you have spoken before or are brand new to speaking. This means you have a chance to speak if you are famous but also if you have never set foot on a stage. Each of the proposals will be evaluated on it’s own merit. We’re excited about this process, and we hope you are too.
(After the first two rounds of selection are complete, we will reveal your names/locations so that we can do important things like figure out if travel from your location will fit in our budget).
If you want to know a little more about how we’re doing it, or, even better, you want to submit a proposal, head on over to the CSSConf Call for Presentations. Thanks for being a part of this. If you have any questions, or need any help getting your proposal together, don’t hesitate to get in touch with us at contact@cssconf.com.
Posted in CSS, CSSConf, Geek, General | 1 Comment »
Wednesday, May 2nd, 2012
I was helping Laura (a developer who works with me) learn about cross-browser debugging this week, which got me excited to share my process.
The first principal is simply:
Work with CSS, not against it.
CSS has an underlying design and when you work with it, with the natural flow of how CSS is meant to be used, you will find you have a lot less bugs. I learned CSS by reading the W3C specifications, which is why I began coding according to the language’s design, but however you learned it, you can pick up some of the key points involved.
The first thing I do is code to a good browser from the start. Our choice is Google Chrome, mainly because of the superior developer tools. When I have something working in Chrome and I am satisfied with it, I take a look at it in either Safari or Firefox.
If there is a discrepancy between these good browsers, chances are you are working against CSS. Do not try to hack around discrepancies between good browsers. Your goal is to figure out *why* it is being interpreted differently. Usually there is a very good reason. These are some of the things I check on if I have bugs:
Posted in CSS, Geek | 49 Comments »
Wednesday, March 14th, 2012
I may have found a way to format CSS3 Gradients that doesn’t make my eyes bleed. Yippee!
I was talking to @glan the other day about CSS3 gradients. We were discussing how to break them down into understandable layers and the difficulties when things you need to know about may be split across multiple properties. At the same time, I was checking out these cool CSS Coding Standards shared by @csswizardry, and I started wondering if formatting the code for CSS gradients could make them easier to understand.
Posted in CSS, Geek, General | 30 Comments »
Saturday, October 8th, 2011
Note: This article is esoteric-could-be-should-be wishing for future browsers. If you only like to hear about what you can use right now, you won’t like this. You’ve been warned. ;)
At first, when the HTML5 working group added the scope attribute I was skeptical. I thought, “oh dear, this is going to be another way for developers to cause massive duplication and inconsistency.” I still do worry, but I’m more excited about the tool and hoping we can also find really great things to do with it.
Scope is great for mashups
The first that comes to mind, and the reason it was created, is mashups. Imagine you want to pull in a twitter feed or a video into your page. Unless you intend to rewrite it all (and often widgets block such fine grained control), you’ll probably be allowing someone else’s CSS onto your page. That can be daunting to say the least.
Posted in CSS, Geek, XHTML / HTML | 7 Comments »
Tuesday, September 6th, 2011
Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done.
When styling headings (or really anything) we want three big goals to be met:
- DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain.
- Predictable – The heading should look the same no matter where on the page it is placed. This will make creating new pages and content easier.
- Keep specificity low and selectors as simple as possible. This will help with performance and keep the site from growing more and more tangled over time.
The html5 section tag is weird. It dramatically changes the way we use headings in the HTML. It also changes the way browsers and assistive technologies are meant to interpret those headings. For that reason, we’ve got to revisit how we style headings. The old way simply won’t work anymore!
It is a subtle difference, but section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it. By tying styles to browser heading level interpretation, developers (trying to implement html5 from the spec) are ending up with selectors that look like this:
h1{font-size: 36px}
section h1{font-size: 28px}
section section h1{font-size: 22px}
section section section h1{font-size: 18px}
section section section section h1{font-size: 16px}
section section section section section h1{font-size: 14px}
section section section section section section h1{font-size: 13px}
section section section section section section section h1{font-size: 11px}
Learn how this can go awry and a better way of styling headings.
Posted in CSS, Geek, General, oocss, Performance, XHTML / HTML | 33 Comments »
Wednesday, June 15th, 2011
Nicholas Zakas and I spoke at Velocity a few minutes ago. First we talked about CSS 3 and it’s impact on performance, then we demoed and open sourced CSS Lint! I really couldn’t be more excited (or relieved, I was super duper nervous before this presentation).
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Posted in CSS, Design, Geek, Image, Mobile, oocss, Performance | 20 Comments »
Friday, June 3rd, 2011
I am so very pleased to announce that Nicholas Zakas and I are joining forces to form a consulting duo. Nicholas has spent the last five years defining what it meant to to be a client-side engineer at Yahoo!. He consistently raised the client-side glass ceiling with his commitment to good code and practical solutions. He also literally wrote the book on JavaScript Performance
. Like me, Nicholas cares deeply about performance and scalability. And, most importantly, we share a love of finding elegant solutions to hard problems, which we feel makes us a good match.
I’ll let Nicholas speak for himself:
I’ll be … teaming up with my friend (and former Yahoo) Nicole Sullivan to do consulting work. Nicole and I have talked off and on about working together on outside projects after having fun working together on a couple of projects at Yahoo!. Between the two of us, we hope to provide a wide range of front-end consulting services including performance evaluations, general architecture, and of course, JavaScript and CSS. If you’re interested in hiring us, please email projects (at) stubbornella.org.
Nicholas Zakas
Please come see us at Velocity Conference on June 14.
Posted in CSS, Geek, General, JavaScript, Latest Happenings, Performance | 6 Comments »
Thursday, April 28th, 2011
I was prepping to speak at Webstock this year when I realized I didn’t want to give the talk I had proposed. I didn’t want to talk about the Mistakes of Massive CSS, because I realized it went deeper than that. In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.
It is time to let ourselves off the hook. There is nothing we could have done by trying harder. There is no magic juju that some other developer has that we don’t. Following our beloved best practices leads to bad outcomes every. single. time.
What are those flawed best practices?
- Classitis!
- Never add an non-semantic element
- Or, a non-semantic class
- Use descendant selectors exclusively
Here is the video of my talk at Webstock 2011.
Posted in CSS, Geek, General, oocss, Performance, XHTML / HTML | 37 Comments »
Monday, April 25th, 2011
CSS 3 is full of ways to reduce our dependence on background images, one of which is pure CSS gradients. They have several features, which I’m sure designers are salivating over, like multiple color stops, and angled, radial, and linear gradients. Many people had built cool designer-focused tools to make interacting with a somewhat confusing gradient syntax a little easier. The issue for me has been that I’m not a designer. I generally work off of photoshop comps or (when doing big re-architecture projects) the site itself, as if the old version were a design. This means that, for the most part, I was trying desperately to match CSS gradients to an image with zero information about how that image would have been created. Because of my focus on fixing old and broken CSS, the original designer may not even still work at the company.
If you don’t know what I mean, picture me with a color picker going pixel by pixel to try to figure out by hand where the color stops should be and what colors I should use versus extrapolate. Then, for each version, making an image of the gradient I’ve created, blowing it up so I can compare it to the image of the original. Rinse, repeat until I’ve come up with something that kinda, sorta approximates the original. Oh yeah, painful.
Posted in CSS, Design, Geek, oocss | 12 Comments »
Monday, February 7th, 2011
Interested in Performance and scaling sites to a large number of visitors or pages? I just realized both Steve Souders and I will be giving talks at Webstock next week! This is a pretty amazing opportunity to massively increase your Performance mojo in one go. :)
I’m going to be hosting a workshop in which you will learn to build your own site using OOCSS techniques. By the time you leave you will have the skills necessary to write efficient, scalable CSS. You’ll understand the joy and pain of CSS3 and HTML5, and be ready to go build the next generation of websites and web apps.
Steve’s workshop is filled with Mobile yummy goodness. How do you figure out that your mobile app is slow before your clients start complaining? What’s even going on in there? In his workshop, Steve is going to open up the mobile black-box and teach you to take a peek inside.
I am super excited about Webstock, even more so now that I found out it will be a perf-geek-meet-up. New Zealand here I come!
Posted in CSS, Geek, General, Mobile, oocss, Performance, XHTML / HTML | 4 Comments »
Saturday, January 22nd, 2011
CSS grids can improve performance? How so?
The Importance of Page Weight
The weightier your page the slower the user experience. There are a few notable ways you can ease this correlation, but for the most part keeping your pages snappy is about being absolutely relentless when reducing and optimizing code. CSS is no exception.
On the other hand, a blank white page with unstyled black text and blue links would be very fast — but no one would care to visit. When we accept that we want sites which are both graphically interesting and fast we can begin to find ways to achieve what I think of as a one to many relationship between the amount of CSS we write and the potential layouts we can achieve.
The cure for bloat
Finding common denominators in our site will allow us to standardize the way we group related content, and the classes we use to style that content. You can think of these common denominators as the semantic building blocks of a high performance website. On a basic level that means that most sites have a particular way of displaying, for instance, a product. Perhaps with an image of the product to the left and a description of the product to the right. If that configuration appears throughout the site it should not be rewritten each time or we’ll have a 1:1 correlation between the size of the CSS and the complexity or number of pages in the site. These are the kind of sites that might start off fast but over the course of their lifetime become slower and slower. Once clean CSS becomes bloated with unnecessary recoding of semantically and visually identical elements.
Posted in CSS, Geek, General, Performance, XHTML / HTML | 14 Comments »
Thursday, December 9th, 2010
Everyone keeps asking me what is with all the “x” in the OOCSS grids… so I finally wrote an article. The short answer is that it isn’t just a clearfix (it does that too), but it also causes the element to stretch wide, even when it has very little content. It is a bit of magic that allows us to use display table-cell to create a new formatting context in all browsers. It also allows us to solve sub-pixel rounding errors without resorting to fixed widths. (This has all kinds of great perf benefits because the grids are nestable and stackable).
content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
Posted in CSS, Geek, General, oocss, Performance | 47 Comments »
Sunday, July 11th, 2010
Multitasking has been stressing me, robbing me of my focus, my productivity, and my appreciation of the beauty of the exact moment I’m experiencing right now, and dammit, I want my brain back!
Once upon a time, I was assigned 21 projects in my first month on a job. Distinct projects, working with different groups of people on completely different tasks. I went from writing code 95% of the time to running from meeting to meeting.
At the same time, I installed IM at work and didn’t create a separate work account (I can see this clearly now, but at the time, I was just filling out my HR profile, I didn’t see the significance). The lines became blurry and I started to get pings around the clock from both work and friends. This is in part due to “crazy-round-world-syndrome”. My life is international, that’s okay, but it does make boundaries harder.
Perhaps it really began as early as 2000, when I got my first cell phone and lived with it glued to my ear? Getting an iphone in January of 2007 certainly made it worse because as a device my precious is meant to be petted, not simply used to accomplish other tasks more efficiently.
I gathered data from scientific american, psychology today, read research papers, took a mindfullness course, and read links that friends posted to twitter.
Posted in Geek, General, Navel Gazing, oocss | 24 Comments »
Saturday, July 10th, 2010
Posted in Accessibility, CSS, Design, event, Geek, General, Image, oocss, Performance, XHTML / HTML | 4 Comments »
Thursday, July 1st, 2010
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 of the internet regarding CSS performance? Kind of sad. We aren’t getting a lot of the basics right, and when we look at the more advanced techniques, there are some spectacular examples of what-not-to-do. Why do we care about CSS performance? As Stoyan talks about in the beginning of the video, it blocks progressive rendering and it is very difficult to auto-minify.
Posted in CSS, Design, Geek, Image, oocss, Performance, XHTML / HTML | 58 Comments »
Friday, June 25th, 2010
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 object is an image to the left, with descriptive content to the right, like this Facebook story:
It is a very simple object, but it is very powerful. We can eliminate many lines of code abstracting this repeating pattern. The code for the media block and many other “web Lego” are available on the Object Oriented CSS open source project.
Posted in CSS, Geek, General, Image, oocss, Performance, XHTML / HTML | 24 Comments »
Tuesday, June 22nd, 2010
Posted in CSS, Geek, XHTML / HTML | 14 Comments »
