How do you write CSS that is:

• Clean? (干净)
• Maintainable? (易维护)
• Scalable? (易扩展)

😵

What should I use?

• Frameworks like Bootstrap and Foundation?
• Methods like OOCSS, SMACSS, Atomic design?

When I'm not desiging/coding…

• 分享前端
• Blog: https://zellwk.com

How do you write clean, maintainable and scalable CSS?

1. Proportional Scaling

2. Responsive Scaling

3. Modular Scaling

组建可以按比例放大缩小

Components (组建）scale according to:

• font-size
• viewport

Relative units（相对单位）

• em
• ch
• %

button {
  font-size: 1em;
  padding: 0.5em 0.75em;
  /* Other properties */
}

/* Group common properties together */
.button {
	display: inline-block;
  padding: 0.5em 0.75em;
  font-size: 1em;
}

.button-small {
  font-size: 0.8em;
}

.button-large {
  font-size: 2em;
}

A Button

Using Sass mixins

A large button

@mixin button {
	display: inline-block;
  padding: 0.5em 0.75em;
  /* Other common properties */
}

.button-large {
  @include button;
  font-size: 2em;
}

Components scale according to:

• font-size
• viewport

Viewport units

• vw
• vh
• vmin
• vmax

.quarter-screen-rect {
  width: 50vw;
  height: 50vh;
}

Fluid Typography with vw

html {
  font-size: calc(16px + 0.5vw);
}

h2 {
  font-size: 3em;
}

For more, read fluid typography by Mike Riethmuller

Proportional Scaling:

• What property does it scale to?
• Use relative units
• Refrain from px

Removing the bottom margin

.component p:last-child { margin-bottom: 0 } 

Removing the bottom margin for everything

.module p:last-child,
.module ul:last-child,
.module ol:last-child,
.module dl:last-child {
  /* losing battle */
  margin-bottom: 0;
}

From this article on CSS-Tricks

Removing margins

h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote {
	margin: 0;
	padding: 0;
}

Universal selectors with adjacent sibling selector

* + * {
  margin-top: 1em;
}

.component > * + * {
	margin-top: 1em;
}

Read lobotomized owl by Heydon Pickering

.button {
	margin-top: 1em;
	margin-bottom: 1em;
	/* Other properties */
}

.button {
	font-size: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	/* Other properties */
}

.button-large {
	font-size: 2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	/* Other properties */
}

.button {
	font-size: 1em;
	margin-top: 1rem;
	margin-bottom: 1rem;
	/* Other properties */
}

.button-large {
	font-size: 2em;
	/* Other properties */
}

Lego blocks

• Remove external whitespace
• Manage internal whitespace
• Prevent whitespace from scaling

Media queries

• min-width queries
• max-width queries

min-width media queries

// Note: Always write media queries in `em`.
.component {
  @media (min-width: 37.5em) {
    font-size: 2em;
  }
}

max-width media queries

.component {
  font-size: 2em;
  @media (max-width: 37.5em) {
    font-size: 1em;
  }
}

Combine min-width and max-width

Responsive Scaling:

• media queries
• favor min-width over max-width
• use both when you need to!

	
Tomorrow, is the fist blank page of a 365 page book. Write a good one 
	
Brad Paisley
	
Dec 31 2016

  
 … 

  
 … 

  
 … 

  
 … 

Morphable blocks

• Find similarities and differences between views
• Craft your best-fit HTML
• Modify looks with CSS
• Minimize the number of modifiers

Additional tips

• Naming components

.quote {
  /* shared styles */
}

.quote--single {
  /* single styles */
}

.quote--single .quote__date {
  display: none;
}

.quote--grid {
  /* grid here */
}

Additional tips

• Naming components
• Namespacing

• Elements: e-
• Components: c-

• Layouts: grid- (.grid-article)
• State: is-, has- (.is-active)
• JavaScript: js (.jsModalToggle)
• Typography: type- (.type-h1, .type-h2)
• Themes: theme- (.theme-primary)

Additional tips

• Naming components
• Namespacing
• Manage specificity

The specificity graph by Harry Roberts

Thank you!

• Slides: zellwk.github.io/scalable-components
• Blog: https://zellwk.com
• Twitter: @zellwk