Neat ways to write BEM without being verbose

BEM + SASS

I love naming classes using BEM, which is a good way to indicate what classes represent (and where to find them in your project), without forcing it into a hierarchy that will cause problems later if you have to change the markup.

Problem is, it can get a bit verbose though.  Especially if you’re being super specific with your names. Writing CSS selectors for long class names is repetitive and annoying. So here’s 2 tips for making it easier using SCSS: Continue reading Neat ways to write BEM without being verbose

The difference between <a> and <button> elements

I’ve seen some markup recently where the <a> tag is being hijacked to do things it shouldn’t be used for, and where a <button> should be used instead. I was going to write a long article about the difference between a HTML <button> element (used normally to DO something), and the HTML <a> element (used normally to take you somewhere else) but I saw this great answer to a question on Quora by Jakob Persson who sums it up perfectly:

This has to do with the semantics of HTML.

An A tag is an anchor element and in the context of hypertext, helps link documents together. HTTP stands for “Hypertext Transfer Protocol” why hypertext is one of the foundational ideas of the web. The word “web” is a metaphor for this network of pages which all tie together, like a spider’s web.

A BUTTON is exactly that, a button. It doesn’t denote there being a relationship between the current document and other. It just says that it is a UI element which you can click.

CSS allows us to style things to look identical. But it doesn’t change the semantics, i.e. the meaning of different HTML elements.

In summary:

  • If your element links the user to another page, then it should be an A.
  • If it’s a UI element that triggers JavaScript, make it a BUTTON.
  • If you want your site to “fail gracefully” when JS is absent, use an A tag that links to a page that relies on a server-side script and attach an event handler to it for the JS functionality.

– Jakob Persson

How long before we get cool curved desktop screens like this one from Black Mirror?

In the Black Mirror episode “Be right back” we see the protagonist painting on a large digital screen which was curved towards the bottom. At the time, this was science fiction, but I wonder how long it’ll be before this is real.

I don’t mean the technology, I know we have touchscreens now, and even curved touchscreens, like the Samsung Edge phone. But everyone right now seems to be obsessed by mobile devices, and tablets. Meanwhile, larger desktop computers for work, for the people actually doing stuff (not consuming content, like the iPad is 90% useful for) aren’t in fashion right now.

black mirror touch screen

If you see someone doing work on a computer on TV, it’s normally on a laptop. A portable, sized laptop.

But what about the artists, who want nice big displays?

This one from Black Mirror seemed perfect. She also got to use proper art tools like pencils and brushes.

Anyway, I’m mostly posting this so that in the near future I can link back to it and go “SEE!!!”.

black mirror touchscreen from "be right back"

It’s also nice to see a computer interface in a TV show that actually looks useful. Not stupid holographic displays or transparent screens which would be a pain to focus on!

Keeping CSS classes together by usage

I’ve written before about keeping your CSS grouped by component, so that styles for a specific part are not distributed wildly around the project and difficult to find.

This is normally done because of media queries. A common thing people might do is to split the stylesheet into 3 chunks. Styles for mobile, styles for tablet, and styles for desktop (or more, depending on how many breakpoints you decide to have). But I prefer to put all styles for a specific component in one place, to save you chasing these around. Even if it does mean having loads of media query declarations. But that doesn’t matter! (I use variables for these anyway). Continue reading Keeping CSS classes together by usage

Don’t scrimp on classes if it means making convoluted CSS

I’ve been reading Harry Robert’s chapter in the “New perspectives on Web Design” book today (he even signed it for me, which was hilarious because apparently nobody had ever asked him that before!), and there’s a great bit talking about reducing the amount of DIVs to create clean markup, and how it’s just cutting off your nose to spite your face.

The pursuit of clean markup and semantic classes and all that came with it was well-intentioned but helped no one. It led to verbose, difficult to maintain, tangled style sheets. The price of omitting a few classes was having to write giant, convoluted selectors to target these orphaned, unnamed DOM elements. As the saying goes, we robbed Peter to pay Paul. We were writing clean markup at the cost of writing verbose, messy and convoluted CSS. We just moved the mess somewhere else.

  • Harry Roberts, New perspectives on Web Design

Avoiding location-based inheritance in CSS

I had a thought today on a personal HTML/CSS project about how to style a light button in a dark container, and how to style a dark button in a light container.

Should I use CSS inheritance to make the button the appropriate colour in each area? That makes sense right? It means I can write HTML not really caring about the styles, and let the CSS do the rest.

But then I worried about what happens if I use the button elsewhere, out of the container. If the coloured container provides the styles, I’ll need at least some base styles on the button. And which one should be the default? Light on dark, or dark on light?

Let’s say light container is the default, so the button by default is dark.

What about then when we want the button on a different coloured background, maybe a red container inside the dark container. We’d have to override the button’s default styles to make it dark on light, then override these again to show as [I dunno, yellow?] on the red background.

I know the “C” in CSS stands for cascade, but this can get out of hand!

There’s a good article about this I found today, which has this great line that I need to repeat over and over.

…your styles will be more flexible and less prone to breaking if you avoid relying on location inheritance.

Read the rest of the article here. It takes you through a good use case of how inheritance can cause problems. It also talks about how “multiple inheritance” can also get out of hand, and solves it with SASS extends, although I prefer more of a BEM approach, but the idea of being very specific about your styles is the same.

Leaving Silktide

So Monday was my last day working for Silktide. I’ve been there 10 years, so the move to a new company will no doubt be a shock to me!

Especially as I’m going back to agency work. Something I’ve not done in about 4 years since Silktide decided to give up on web design.

In 10 years I’ve seen the company change from web agency, into a software company working only on our own products. I miss working with clients, working on short projects you can hand over to a happy client. My problem with working on software is that you’re detached from the customer (unless obviously you’re in a role that deals with them). So it’ll be nice to speak to smart people and help them achieve whatever it is they need a web agency for.

The best time since the move to software was when we turned Nibbler (the free website testing tool) into a social experience, where users could claim websites and add to an online portfolio. Some users really loved it, especially the leaderboard showing the top 10. It was nice to get involved in that community and get to know users. That’s the sort of thing that really gets me excited, seeing people enjoy using a product I’ve worked on, and getting useful feedback. Unfortunately though, the decision was made to strip Nibbler back to be much more simple where there’s zero interaction.

Working on a string of projects that will never see the light of day, and one which the threat of it being discontinued hanging over it like the sword of Damocles saps quite a lot of my morale, so I’ve not been enjoying my work for quite a while, which is why I’m glad to be moving back to a type of work which I think will make me happier.

I’ll miss all the guys there a lot though, they’re a great, very talented bunch. And the office banter is fantastic. Hopefully I’ll still see them often, as I’m only moving a couple of doors down.

So, two life changing things in the space of a month, getting married, and switching jobs! Both took a lot of preparation and stress, which is now mostly almost over.

Desk dinos & robots

desk donos

I had a fairly substantial collection of robots and dinosaurs on my desk. I’ve brought them home. Not sure now what to do with them!

Leaving presents

lego dimensions

I love the Lego games, and was so happy to get this as a leaving present from the Silktide gang. I was going to do something more productive in the time before I start my new job, but I’ve now constructed this. It’d be rude not to play at least just a little bit…

Squattypotty

This is my other leaving present. Jess bought me a “SquattyPotty”. I had no idea what it was until I watched the hilarious video (here).

The science is sound, and Jess is clearly looking out for the health of my colon, but I had absolutely no idea how to react when given this as a present.

Nobody has ever given me a pooing aid before.

Out of software

Biggest irritation right now, I don’t have an Adobe Creative Cloud licence at home, so can’t use Photoshop or Flash, and I wanted to use this time for working on a fun side project. It costs more than I’m willing to pay for only working on hobby stuff, dammit!

What I will be doing though is learning Zurb’s Foundation. I’ve always been a fan of Bootstrap, and this looks similar, so shouldn’t take long to learn.

So I got married

I’m quite lazy at updating this blog, so this isn’t exactly news straight off the press, but I thought it worth noting here.

Yes we got married 2 weeks ago, on the 31st of October! Here’s some photos:

“Previous” is the past, “Next” is what happened after

The Santander website seems to be confused what time is.

So, what is “time”? Oxford dictionary defines it as:

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

But we know that already. We also know that things that happened previous to now happened in the past, right? And things that happened next were things that happened closer to now.

Someone tell that to Santander!

If you don’t know, Santander is a bank where I have an online account. And it seems every time I log in I find new horrible usability problems that just frustrate me. It’s quite easy to pick on bank websites for poor usability of course because every site I’ve used are rife with terrible usability problems. But today I’ll just pick on one small problem!

I was navigating the previous transactions where I saw this at the bottom of the page:

previous next buttons on Santander website

Standard pagination controls, we’ve seen them on a million websites, right? But in this case, they don’t make any sense.

The first screen of transactions are the most current, and to navigate to the previous transactions you have to press “Next”.

Wait a minute, that’s not right!

So I’m seeing older transactions, transactions that happened previous to the ones I’m looking at, and the word I have to click is one that actually means the opposite?!

So now I’m looking at transactions that happened a while ago, they’re actually from last month, and to go back to see the ones that happened after those, the ones that happened next, I have to press “Previous”!

As if this wasn’t weird enough, if I press “Next” a few times, I get an option to press “First” which doesn’t show me the first transactions I ever made, it shows me the most recent. Technically the LAST transactions I ever made!

I’ve seen this done of a few websites, and it doesn’t make sense to confuse your users with poor wording.

Sort it out Santander!

My opinions on using or not using Bootstrap

I found an article today titled “Strapless” by Aaron Gustafson (read it here) with some arguments for not using Bootstrap in your project. I use Bootstrap all the time, and I feel it saves a lot of time when starting a new project. Here’s my opinions on his points:

1. Bootstrap doesn’t solve your problems. Design is problem solving. The design decisions made by the creators/maintainers of Bootstrap solve their problems, not yours. You may share some of those problems—a need for responsive layouts, for example—but not others. You need a system that is tailored to solve your problems and only you (and your team) know what those problems are. Have you ever tried on an article of clothing that’s “one size fits all”? How well did it fit your body type? Unless you are absolutely average in all respects, probably not all that well. Solve your problems with your own Bootstrap-esque pattern library.

I actually agree with this point, but Bootstrap is a starting point, not a full solution. I like it because I can get something working really quickly, and can make the structure of a page, then refine it and change the look and feel later.

2. Bootstrap offers more than you’ll need. Bootstrap contains a lot of components and design patterns. It was created to address a wide array of project needs

Okay yeah, it is a bit bloated. It’s crammed full of stuff that you might never need – but actually that’s something I really like about it! If you suddenly need to add a carousel, there’s one built in. If you suddenly need to add a responsive wrapper for a Youtube video, it’s there. If you suddenly need to add a modal, it’s there. Same for lots of other really standard stuff.

Plus as long as you’re using the Bootstrap SCSS files and not the final exported version, you can pick and choose which sections you want, and comment-out the ones you don’t need. Here’s the _bootstrap.scss file for one of my projects where I’ve just uncommented the components that aren’t needed. These won’t be compiled into the final css, so there’s no bloat. But I can add them back in really easy if I need them. bootstrap file in phpstorm

If this isn’t how you include Bootstrap, you should (IMO anyway), and here’s an example project to get your started.

3. Differentiating yourself from you competition is harder. Bootstrap sites have a very common look to them.

Yeah but a Bootstrap site doesn’t have to look like a Bootstrap site! It’s a starting point, a framework. Sure if you keep the default theme, it will look like a Bootstrap site, but you can expand on that and add your own styles.

The major benefit I find is that it makes your markup standard, which means anyone who’s familiar with the Bootstrap classnames will save time when switching between projects and having to figure out how it all works!

Check out the rest of Aaron’s arguments here.