Post Category → Design

Writing Happy Stylesheets with Webpack

While the last few years have seen JavaScript turn from a tangle of jQuery into an orderly affair, CSS has been the subject of neglect. While JavaScript has learned new tricks like modularity, components and dependency bundling, most stylesheets are still a monolithic mess of globals.

But with the advent of Webpack, it is time for stylesheets to shine again. In fact, many of the lessons which JavaScript has learned can now be applied to SCSS and LESS too — leaving your stylesheets clean, independent, and most importantly, happy.

Continue reading →

Why You Shouldn’t Style React Components With JavaScript

Update: I’ve announced react-pacomo, a solution for some of the problems with CSS outlined here, without the downsides of Inline Style.

So one of the hottest topics in the React world lately is Inline Style, i.e. setting styles with an element’s style property instead of CSS.

This new and shiny way of doing things promises to make your life easier. It eliminates the bugs caused by global styles, it allows you to package styles with your components, and it unifies the entire development process under the single language of JavaScript, fuck yeah. And now that all the cool kids are using it, it’s time to jump on the bandwagon too!

But don’t just take my word for it! See for yourself with this handy dandy list of all the problems which you could have fixed with plain old CSS if you hadn’t of drunk the cool-aid, and the new problems you’ll now have to deal with too.

Continue reading →

A system for structuring your React application’s styles

Read the full specification at the GitHub repository.

Have you ever experienced the frustration involved in adding styles to your new component, just to find that some other style, somewhere in the same project, is conflicting with yours? Without structure, stylesheets become confusing and unmaintainable:

  • Styles with global scope end up biting you in the ass months down the track
  • Deeply nested selectors confuse you as to what it is they’re actually supposed to do
  • Just finding the various rules across various files which combine to make one component’s style can be a pain in itself

Styling components doesn’t have to be a nightmare

Things have certainly gotten better in recent years. For example, compile-to-CSS languages like LESS and SASS help facilitate separation of concerns, and React itself does a lot to encourage good structure.

However, better tools present a new problem – we can end up spending more time deciding where to put things than actually making them. And what if you make the wrong decisions? While React, LESS and SASS certainly encourage good structure, they definitely don’t enforce it.

While we’ve come a long way, what we still need is a specification – a set of decisions which do the hard design work for us. And as it happens, the Pacomo project does exactly that!

Continue reading →

Introducing Memamug, a small open-source app made with React and Rails-api

View the source or see it live

One of the biggest pains I hear from new and old developers alike is that once they’ve learned the basics of a new technology, they struggle to apply them to an actual project.

Actually, this isn’t just a problem I’ve heard about – I’ve experienced it myself. In particular, learning React has been as much about figuring out what to do with it as learning the API itself. So to cut a long story short – I’ve built a single-page app with React and Rails-api. And I’d like to share it with you. And it’s not a todo list!

Memamug is a tiny app to help you remember people you meet. However, putting it together wasn’t a tiny job. It demonstrates a number of patterns and techniques which apply to larger projects, including how to:

Continue reading →