RECUBE

This is my internal methodology for CSS. It is based on Andy Bells CUBE css and the book Every Layout. It is meant to create CSS that is well structured and easy to modify. My methodology is just a more explicit version of CUBE because CUBE itself expects that you use a reset and do the elementary styling. I just prefer each step to be explicit.

The purpose of this method is to work from broadest to most specific. The goal is not to create perfect layouts by pixel-bashing. Instead, the styles should provide suggestions to the browser that create flexible layouts.

• Reset: CSS Reset
• Elementary: Base styling using elements
• Composition: Layout styling using classes
• Utility: Visual styling using classes
• Block: Modifying smaller blocks not covered by previous sections
• Exception: Exceptions to block rules

The purpose of the reset is to make sure that you are always working from a clean slate. It prevents messy default styling caused by different defaults between browsers.

The elementary section is essentially to make a clean looking layout if all of the other styling is removed. This section only uses element styling.

This is very similar to the elementary section, but instead of using element selectors, it uses class selectors. In one sense, it is broader than the elementary section because the class selectors can be applied to multiple types of elements. In another sense, it is narrower because it provides more narrow styling.

What should the composition layer do?

• Provide high-level, flexible layouts
• Determine how elements interact with each other
• Create consistent flow and rhythm

What shouldn’t the composition layer do?

• Provide visual treatment such as color or font style
• Provide decorative styles such as shadows and patterns
• Force a browser to generate a pixel-perfect layout instead of a flexible, progressive layout

A utility is a CSS class that does one job well.

What should utilities do?

• Apply a single CSS property, or a concise group of related properties to create re-usable helpers
• Extend design tokens to maintain a single source of truth
• Abstract repeatability away from the CSS and apply it in the HTML instead

What shouldn’t utilities do?

• Define a large group of unrelated CSS properties. For example, a utility that defined color, font-size and padding would make more sense to be a block.
• Be used as a specificity hack. For example, setting all properties with !important will undoubtedly cause problems in the long-run.

A block is a skeletal component like a card element or a button element.

What should a block do?

• Extend the work already done by the global CSS, composition and utility layers
• Apply a collection of design tokens within a concise group
• Create a namespace or specificity boost to control a specific context

What shouldn’t a block do?

• Grow to anything larger than a handful of CSS rules (max 80-100 lines)
• Solve more than one contextual problem. For example: styling a card and a button in one file

An exception is a deviation from the rules outlined in a block. Usually, an exception is related to a state change.

What should an exception do?

• Provide a concise variation to a block
• Use data attributes

What shouldn’t an exception do?

• Variate a block to the point where it isn’t recognizable anymore. This is where a new block should be created
• Use CSS classes

/*CSS RESET*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*END CSS RESET*/

/*ELEMENTARY*/

/*END ELEMENTARY*/

/*COMPOSITION*/

/*END COMPOSITION*/

/*BLOCK*/

/*END BLOCK*/

/*EXCEPTION*/

/*END EXCEPTION*/