Tips

Tips, techniques, and best practice on using Cascading Style Sheets.

Mobile First

The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:

Mobile: 40.0rem (400px) Tablet: 80.0rem (800px) Desktop: 120.0rem (1200px)

/* Mobile First Media Queries */

/* Base style */
{ ... }

/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }

/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }

/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }

See more examples of tips here.

Extending The Inheritances

The style of an element can be defined in several different locations, which interact in a complex way. It is form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.

/* Extending The Inheritances */

/* Applying color variation */
.button-black {
  background-color: black;
  border-color: black;
}
.button-black.button-outline {
  color: black;
}
.button-black.button-clear {
  color: black;
}

/* Applying size variation */
.button-small {
  font-size: .8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 1.5rem;
}

.button-large {
  font-size: 1.4rem;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2rem;
}

See more examples of tips here.