The @extend directive in Sass can produce undesirable side effects. David Khourshid shows how to use @extend effectively to produce clean & organized CSS.

When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features. This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not.

The more your website resembles an application over a document, the more global typography styles become a pain to build upon. Even heavily content-based websites seem more like an app in the modern world of responsive design. The solution? Just scope typographic styles:
.text h1 {...}
.text p {...}

Managing CSS at scale is hard; and a lot harder than it should be. ITCSS is a simple, effective, and as-yet unpublished methodology to help manage, maintain, and scale CSS projects of all sizes.
In this talk we’ll take a sneak peek at what ITCSS is and how it works to tame and control UI code as it grows.

certainlyakey starred HugoGiraudel/sass-boilerplate

certainlyakey starred CSSSR/csssr-project-template

certainlyakey starred bbc/gs-sass-tools

certainlyakey starred sass-mq/sass-mq

Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.
base/ - resets and basic typography
components/ (or blocks/) - components with their separate mixins, images, variables, (also possibly scripts and markup)
layout/ - structural styling for main elements (asides, mains, headers etc.)
pages/ - styles specific to certain pages
themes/ - if site contains several color/typography themes - put here styling that should vary according to different themes
abstracts/ - common vars, functions, mixins, extends
vendors/ - external scripts or frameworks specific styling (jq-ui etc.)

Luckily for us, solutions exist to the problem of creating fast, responsive, fully customizable grids: Susy is a Sass-based grid framework. It’s very lightweight and enables you to create entirely custom grids in CSS without touching your markup.

Grandstand is a scalable front end architecture and a lightweight Sass framework. Consisting of a collection of common CSS abstractions and utility helper classes, Grandstand allows you to quickly development components in a reusable, performant manner.

certainlyakey starred bbc/gel-grid

@extend is now widely considered an anti-pattern, so its usage is thankfully fading out, but we’re not quite there yet.

certainlyakey starred at-import/breakpoint

I promised I’d write a blog with more details so here goes. When I started writing this I realised there was lot to say so I’m going to split this two blog posts which covers how we’re approaching CSS at BBC Sport.

Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.

About a year ago, I wrote Mixin or Placeholder (my first article here at SitePoint) immediately followed by What Nobody Told You About Sass Extend. And here I am, one year later, changing my mind again and writing why I think the @extend directive from Sass is really far from being the Eldorado.

As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.

A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.

In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

The CSS toolkit and guidelines that power GitHub.