architecture Archives

Article April 21, 2020

Building a Scalable CSS Architecture With BEM and Utility Classes

Author

11 Comments

Maintaining a large-scale CSS project is hard. Over the years, we’ve witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals:

Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.
Consistency: we want to make sure all developers are on the same page.

For the past year and a half, I’ve been … Read article “Building a Scalable CSS Architecture With BEM and Utility Classes”

Article March 2, 2020

Considerations for Creating a Card Component

Author

Chris Coyier

6 Comments

Join Conversation

Even a simple Card component can be tricky to design an API around. What abstraction are you providing? How much control do you want to give? If you make it too flexible, you aren't providing much value. If you make it to rigid, you also aren't providing much value.

architecture components react

Link January 23, 2020

This Page is Designed to Last

Shared by

Chris Coyier

Jeff Huang, while going through his collection of bookmarks, sadly finds a lot of old pages gone from the internet. Bit rot. It’s pretty bad. Most of what gets published on the web disappears. Thankfully, the Internet Archive gets a lot of it. Jeff has seven things that he thinks will help make a page last.… Read article “This Page is Designed to Last”

Our Notes / Read at jeffhuang.com

architecture opinion

Article December 16, 2019

Domain-Driven Design With React

Author

Adam Conrad

3 Comments

Go to Comments

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth is that we can do better. Let’s take a look at one pattern you might consider using to architect your site.

At first, you might split up your code between /components and /containers folders. This works for small sites but you’ll find yourself look for something more robust when scaling to larger sites. … Read article “Domain-Driven Design With React”

architecture organization react

Link December 6, 2019

CSS Architecture for Modern JavaScript Applications

Shared by

Chris Coyier

There is a lot to like from Mike Riethmuller here:

The title. When you’re building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn’t otherwise choose.
The personal experience and pragmatism. Drawing on five years of consulting, he’s seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says “it’s

… Read article

Our Notes / Read at www.madebymike.com.au

architecture

Article July 8, 2019

The Many Ways to Include CSS in JavaScript Applications

Author

Dominic Magnifico

6 Comments

Go to Comments

Welcome to an incredibly controversial topic in the land of front-end development! I’m sure that a majority of you reading this have encountered your fair share of #hotdrama surrounding how CSS should be handled within a JavaScript application.

I want to preface this post with a disclaimer: There is no hard and fast rule that establishes one method of handling CSS in a React, or Vue, or Angular application as superior. Every project is different, and every method has … Read article “The Many Ways to Include CSS in JavaScript Applications”

architecture css-in-js

Link January 8, 2019

The 10,000 Year Clock Design Principals

Shared by

Chris Coyier

In the new year edition of the Clearleft newsletter, Jeremy Keith linked to the design principals Danny Hillis thought about while considering a clock that would work for 10,000 years.

Here’s part of that page… Read article “The 10,000 Year Clock Design Principals”

Our Notes / Read at longnow.org

architecture design principles

Link October 31, 2016

8 simple rules for a robust, scalable CSS architecture

Shared by

Chris Coyier

I don’t disagree on any particular point on this thesis by Jarno Rantanen.

This is the first I’ve seen this particular naming convention, which seems fine to me, but I’d add that any well-considering naming convention works.

Also, there is this:

Cascading styles will ruin your day, eventually.

A sentiment shared by many these days, and the likely culprit for all the peter-griffin-adjusting-the-blinds.gifs out there in the world. Again I don’t entirely disagree, but, there are styles I gotta imagine … Read article “8 simple rules for a robust, scalable CSS architecture”

Our Notes / Read at github.com

architecture cascade