front end development

Simple CSS specificity rule guide

There are a few ways to apply CSS styling rules to an element. Each one is less or more specific than another. Applying a rule using a class selector when you’ve applied a different rule using an ID selector won’t work. Batificity isn’t the CSS specificity guide you deserve, but the one you need right now,… (Read More)

Responsive imagemap with interactive highlighting function

A short post to help anyone who is looking to implement a responsive HTML imagemap, which also features an interactive highlighting function.

Technical case study: CSS Flexbox for BEKB Flash

CSS Flexbox has been ready for mainstream use for a while now, and I’ve implemented it on a third client project for my employer.

Optimizing layout changes with separate CSS files

HTTP/2 allows you to separate your CSS, JavaScript and other template resources into individual files, without running into problems with multiple requests.

The CSS :not() selector

One of the best CSS tips I’ve come across in recent months is the :not() selector. Rather than having to define a set of rules for an element, then re-defining new rules for the element when it has a certain class or attribute, you can use :not() to be more specific in the first place.… (Read More)

Technical case study: !frappant

My employer re-branded recently, which meant a new corporate identity and a new website using Zurb Foundation, CSS Flexbox and TYPO3.

Avoiding specificity issues in CSS

Holy moly. What a discussion we’ve gotten into over on Twitter about CSS specificity, BEM, and inheritance. I wrote yesterday that the idea is flawed and tries to work around problems which aren’t actually problems at all, but part of the language of CSS. As Duncan noted: the problem is actually, “people write bad CSS”. Dirk from… (Read More)

Why using BEM for your CSS is a bad idea

I came across the BEM (Block, Element, Modifier) technique for CSS coding today. On reading half a dozen basic introductions to the technique, I saw immediately that the concept is based on weak coding principles, not code simplicity and reusability.

Adding diagonal edges to HTML elements

Using CSS pseudo elements to add diagonal borders and edges to the sides of block level elements.

CSS Reset done properly

A CSS Reset (or “Reset CSS”) is a short, often compressed set of CSS rules to reset the styling of HTML elements to a consistent standard. I’ve rolled my own; based on my own experience of CSS programming over the past fourteen years and based on other, well-known reset files.