modulare Webentwicklung

Using Pattern Lab and BEM on a project I stumbled upon a great way of structuring CSS, better naming, and better a developer experience.

Writing CSS is easy. Writing maintainable CSS is hard.

Denis

Thoughts on web development, open source, software architecture, and the future.

A new OOCSS abstraction

Creating a component framework for the City of Gothenburg and the challanges of moving towards a modular UI design methodology.

It's fun writing beautifully architected CSS components, but the fact is, I won't always be there, and in the monolith model, the team will never stop writing CSS. Functional CSS is the idea that instead of writing big, monolith components in my CSS, I write small, single property, immutable classes that can be assembled into a larger component in HTML.

“I have preached BEM, and I think it's a good solution to a lot of CSS semantic issues. But I think having a well documented naming scheme is more important than having a perfect one, and being dogmatic doesn't help anyone.”

Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, because I’ll be using terms that assume a basic understanding of this CSS methodology.

A few weeks ago I tweeted about BBC Sport’s CSS architecture and it got a lot of attention:

How rethinking the Airbnb app changed the way we approach design

As projects grow, they can become unruly. Kasey shares when it’s a good time to reign in the chaos and start refactoring.

Inlining critical CSS is an optimization technique designed to make your site render blazingly fast. But does it?

There’s a recent CSS property that I had originally been quite excited about: all. The all property is a shortcut for resetting all of the properties on a given element. Like a big ol’ CSS rese...

CSS selectors all exist within the same global scope.

A few months ago we had the opportunity to create a new product from scratch at YPlan and we wanted to do it in the right way. Our aim was…

A blog on CSS, HTML, Javascript to make and design websites

Simple tips to help us write better documentation, and eventually attract more developers into using our open-source projects.

Who bridges the gap between the design systems and the engineering team? I call these enablers: “Design Systems Ops”

So how do you sell a design system to the client? How do you establish a shared commitment within the company to put a pattern library on the roadmap? As designers and developers, we often know and see the benefits of an overarching system that radiates consistency throughout the different experiences of a company. But sometimes it’s seen as a very unpredictable investment, and the value isn’t necessarily visible right away. In his article on Selling Design Systems, Dan Mall suggests to illustrate how fractured an organization is by printing out its different presences online an...

Our markup too often remains a snarl of divs, our CSS a chaos of classes. Tim Baxter urges us to move beyond that. We can use real objects now instead of abstract representations. We can write CSS …

The way you manage styles can make or break a long-running web project. Keeping things modular helps a great deal, but that’s only part of the solution. Six months ago we had a go at setting up CSS unit tests for our UI components. Brilliant decision, as it turns out! Since then, our job is a lot nicer. The speed of development is fast and steady. Each of us on the team is now coding with confidence, without the fear that things might unexpectedly break. And here’s how we did it:

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end…

Adding further meaning and information to the BEM naming convention

Harry Roberts recently wrote about creating a Specificity Graph to get a better picture of your CSS. Harry’s conclusion is that a spiky graph is a bad graph. Spikes that occur mid-graph could lea...

We help design leaders get the most from their products, services & teams.

In this new Pattern Build series, we’re going to pick a pattern on the web and write modular, responsive, and reusable HTML and CSS for the particular pattern. This week, we’re going to recreate the cards seen on CodePen.