Tips for css/sass

No need for a new haircut

Fabien Garcia

Flexbox

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

Media queries

@include media-breakpoint-up(lg) {
  // something up
}

@include media-breakpoint-down(xs) {
  // something down
}

Default!

Placeholder selectors

%animal {
    background: gray;
    // and so on...
}
.cat {
    @extend %animal;
    color: white;
}
.dog {
    @extend %animal;
    color: black;
}

Auto-prefix VS Compass/Bourbon

Extending a selector

.animal {
    background: gray;
}
.cat {
    @extend .animal;
    color: white;
}

count

.with-number-circled {
  counter-reset: section;
  list-style-type: none;

  li:before {
    counter-increment: section;
    content: counter(section);
  }

Cool CSS selectors

first-of-type & last-of-type

not

first-child & last-child

even & odd

example

.table-inside-border {
  @extend .table-bordered;
  border: 0;

  thead tr:first-of-type td, th,
  tbody tr:first-of-type td, th {
    border-top: 0 !important;
  }

  thead tr:first-of-type td:first-of-type,
  thead tr:first-of-type th:first-of-type,
  tbody tr td:first-of-type,
  tbody tr th:first-of-type {
    border-left: 0!important;
  }

  thead tr:first-of-type td:last-of-type,
  thead tr:first-of-type th:last-of-type,
  tbody tr td:last-of-type {
    border-right: 0!important;
  }

  tbody tr:last-of-type td,
  tbody tr:last-of-type th {
    border-bottom: 0!important;
  }
  tfoot tr td {
    border-top-style: double !important;
    border-top-width: 4px !important;
    border-left: 0!important;
    border-right: 0!important;
    border-bottom: 0!important;
  }
}

Best practice

No ID selector ( #bad-idea )

Never style an html element

No more than 3 nested selector

Question ?