Pretty things – Whereunto CSS?

by Gilbert Keith

I’m teaching myself CSS. It’s pretty easy. It’s pretty powerful, too.

My goal has been to make a website of sorts with info about road trips – how to get started thinking about it, costs, preparation, tools, survival, etc.

I want to include some pictures with it.

My initial idea is that I will mimic the design of some website like The Muse:

The muse homepage

The muse homepage

However, if you want to do something really crazy, you might have to go bonkers with your css code.

Take a look at Meetup’s Jobs page: it seemingly has no static background; the text, which is a few really short lines, is only opaque at a very specific point – it becomes transparent as you scroll down; the pictures change as you scroll! and without any “transition effects” really… it’s just *BOOM* and it appears after you scroll a particular distance. That’s awesome.

Take a look at what appears to be the code, though.

The HTML looks fairly clean:

HTML source for the Meetup Jobs page.

HTML source for the Meetup Jobs page.

You can kind of see what they are doing: Each little scroll-frame is a “slide”, it has some kind of data-attribute for the photo that applies to that division (turns out this is an HTML5 thing.)

But try to parse the CSS for this, and you’ll see what a pain it is:

#C_announcement{display:none !important}.photo-attribution,#perksList a{background:rgba(0,0,0,0.5);padding:0 0.25em;text-decoration:none!...

… and so it goes on for ~16000 more characters! What the actual fuck?

There is no formatting to the code, either. Perhaps meetup has to worry about it all the extra data it would add onto the file for properly formatting it… but then again, should it? CSS is cached by the browser:

Browser caching for static resources can save a user time if they visit your site more than once. Caching headers should apply to all cacheable static resources, not just a small subset (such as images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, etc.).

So, yeah, something like Kit Check, which also has a web-app, has a really readable CSS file.

/* WordPress core classes */
  :-moz-placeholder {
    font-style:normal;
    color: #45484a;
  }
  :-ms-input-placeholder {
    font-style:normal;
    color: #45484a;
  }
  ::-webkit-input-placeholder {
    font-style:normal;
    color: #45484a;
  }
  .alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
  text-align: center;
}
.alignright,
.alignnone,
.alignleft,
.aligncenter {
  max-width: 100%;
  height: auto;
}

and so on.

It’s very weird. I’ve never been enamored about front-end engineering, but if 30% of my work involves this (I’m assuming 60% is JS and 10% is HTML) then I’d want to smack something really hard at the end of each day

Advertisements