PB138: Intoduction to CSS

Attribute ordering

Random

.module {
   border: 1px solid #ccc;
   width: 25%;
   padding: 20px;
   position: relative;
   min-height: 100px;
   z-index: 1;
   border-radius: 20px;
}

.module {
   border-radius: 20px;
   border: 1px solid #ccc;
   min-height: 100px;
   padding: 20px;
   position: relative;
   width: 25%;
   z-index: 1;
}

Alphabetical

.module {
   width: 25%;
   min-height: 100px;
   padding: 20px;

   border: 1px solid #ccc;
   border-radius: 20px;

   position: relative;
   z-index: 1;
}

Grouped by Type

Recommended ordering

Positioning
Box Model
Typography
Visual
Animation
Misc

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
 
  /* Box Model */
  
  /* Typography */
 
  /* Visual */
 
  /* Animation */
 
  /* Misc */
}

.declaration-order {
  /* Positioning */
  
  /* Box Model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
 
  /* Typography */
 
  /* Visual */
 
  /* Animation */
 
  /* Misc */
}

.declaration-order {
  /* Positioning */
 
  /* Box Model */
  
  /* Typography */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;
 
  /* Visual */
 
  /* Animation */
 
  /* Misc */
}

.declaration-order {
  /* Positioning */
 
  /* Box Model */
 
  /* Typography */
 
  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;
 
  /* Animation */
  transition: all 1s;
 
  /* Misc */
  user-select: none;
}

Class Naming: BEM

Block

Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.

Block names: Latin letters, digits, and dashes.

Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: .block__elem

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes:

.block--mod or .block__elem--mod

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

Example

Layouting

1D - Flexbox

.container {
  display: flex; /* or inline-flex */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

2D - Grid

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

PB138:

By Lukáš Grolig