Things To Avoid When Writing CSS (Part 2)

Photography

How does your UI design process begin? How do you embark on translating UX research into manifest assets? I tend to play with colour palettes and typefaces, iconography and basic interaction prototypes. From these initial ideas, I start to construct a semiology; an interface lexicon. The stage at which I start trawling the Creative Commons for photographs of people standing around wearing nice clothes is the stage at which I’ve stopped giving a fuck.

Giving anything a set height ever

The simple elegance with which web content assumes the spaces in which we put it brings a tear to my eye sometimes. To reproduce:

  1. Put some text in a wide box
  2. Make that box narrower
  3. Observe the box getting taller to compensate, continuing to occupy a similar area

Calling it “semantic”

The thing about the word “semantic” is it means different things in different contexts. That’s kind of how logical semantics work actually, but let’s not get too bogged down with that. The point is, on the web, the term semantic — as in “semantic HTML” — has a very particular meaning. It means interoperably actionable by the browser, not “sounds good to me, the developer”.

<div class="button">Activate</div>

Making it just about the code

Since I wrote the first instalment of Things To Avoid When Writing CSS, I’ve had a lot of feedback, including but not limited to, “100% wrong”, “utter trash” and “you’re obnoxious”. A lot of this feedback comes from an angry contingent working in “large teams” for “big companies” who claim that some of my advice would not suit their setting — a setting in which several people work on the same CSS code base simultaneously and indefinitely.

A11y Rocks

If you haven’t picked up a copy yet, A11Y ROCKS is a compilation of songs from the Web Accessibility Community™. All proceeds go to two really good causes.

--

--

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Heydon

Heydon

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design