Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS on Wikipedia

SPECIFICITY

Specificity can be one of the most difficult concepts to grasp in CSS. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.

For Star Wars lovers - CSS: Specificity Wars

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Specificity values

<style> - 1000
ID (#) - 100
attribute, class or pseudo-class - 10
element name or pseudo-element - 1

body #content .data img:hover

+10

+100

122

INLINE

vs.

INLINE-BLOCK

vs.

BLOCK

vs.

FLEX

INLINE

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.

BLOCK

respect all margins and paddings
can have a width and height set
force a line break after the block element (100% width)

INLINE-BLOCK

respect all margins and paddings
can have a width and height set
allow other elements to sit to their left and right.

FLEX

Next generation magic.

// Old code

.outside {
    height: 100%;
    position: relative;
    width: 100%;
}

.inside {
    background: #cd679a;
    height: 50px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    width: 50px;
}

// Flex code

.outside {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.inside {
    background: #cd679a;
    height: 50px;
    width: 50px;
}

POSITION

relative - does nothing by itself, but allows us to position an element with top, right, bottom and left.

absolute - takes the element out of its normal context and positions it relative the closest parent with position: relative;

fixed - takes an element out of all context and positions relative the viewport (stays the same position as we scroll).

FLOAT/CLEARFIX

Floating elements "destroys" the box-model and the parent will lose all height.

Solution 1. overflow: hidden; on wrapper div

overflow: hidden;

Solution 2. clearfix

.cf

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

// For IE 6/7 only
.cf {
    *zoom: 1;
}

BEM

Block

Element

Modifier

BLOCK

.transaction {
    border: 1px solid #000;
    color: black;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint deserunt consequuntur ratione inventore modi, autem deleniti voluptates, eius unde quam vel aut. Accusantium, voluptate modi rem debitis ducimus, cum doloremque.

<div class="transaction">
    <p>

ELEMENT

.transaction {
    border: 1px solid #000;
    color: black;
}

.transaction__details {
    padding: 20px;
}

<div class="transaction">
    <p class="transaction__details">

MODIFIER

.transaction {
    border: 1px solid #000;
    color: black;
}

.transaction__details {
    margin: 20px 0;
}

.transaction--rejected {
    color: red;
}

<div class="transaction transaction--rejected">
    <p class="transaction__details">

COLORS

rgb - rgb(0, 0, 0)

rgba - rgba(0, 0, 0, .5)

hex - #000000 (or even better #000)

Variables

    // Colors
    $color—background: #fff;
    
    // Sizing
    $size—padding: 20px;

// Nothing

Syntactically Awesome Style Sheets

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, etc. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

What is ?

Sass's two syntaxes

// SASS

.content
    border-color: #c3c3c3
    color: #000

.border 
    padding: 20px 10px
    margin: 0 auto
    border-color: #fdd

// SCSS

.content {
    border-color: #c3c3c3;
    color: #000;
}

.border {
    padding: 20px 10px;
    margin: 0 auto;
    border-color: #fdd;
}

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. My recommendation is to never nest more than four levels.

NESTING

// SCSS

.content {
    border-color: #c3c3c3;
    color: #000;

    li {
        display: inline-block;
    
        a {
            padding: 20px 10px;
            border-color: #fdd;
        }
    }
}

// Rendered CSS

.content {
    border-color: #c3c3c3;
    color: #000;
}

.content li {
    display: inline-block;
}

.content li a {
    padding: 20px 10px;
    border-color: #fdd;
}

Sometimes it's useful to use a nested rules parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class.

Parent selector - &

// SCSS

a {
    color: #000;
    text-decoration: none;

    &:hover {
        color: #00f;
        text-decoration: underline;
    }
}

// Rendered CSS

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #00f;
    text-decoration: underline;
}

You can store any CSS value (things like colors, font stacks, etc) you think you'll want to reuse. Sass uses the $ symbol to make something a variable.

VARIABLES

// SCSS

$color—background: #fff;
$size—padding: 20px;

div {
    background: $color-background;
    padding: $size-padding;
}

// Rendered CSS

div {
    background: #fff;
    padding: 20px;
}

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

MIXINS

// SCSS

@mixin border-radius($radius: 10px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
    @include border-radius; 
}

.box--rounded {
    @include border-radius(50px);
}

// Rendered CSS

.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

.box--rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
}

Mixins are included in the document with the @include directive. This takes the name of a mixin and optionally arguments to pass to it, and includes the styles defined by that mixin into the current rule.

MIXINS: @include

// SCSS

@mixin a ($color) {
    background: $color;
}

@mixin b {
    @include a(red);
    font-size: 20px;
}

div {
    @include b;

    text-transform: uppercase;
}

// Rendered CSS

div {
    background: red;
    font-size: 20px;
    text-transform: uppercase;
}

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. BUT it adds another HTTP request.
Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

IMPORT

// _reset.scss

ol {
  margin: 0;
  padding: 0;
}

// base.scss
		
@import 'reset';

body {
  font: 1em Helvetica, sans-serif;
  background-color: #efefef;
}

Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss. Sass is smart and will figure it out for you.

Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.

Important to note that we don't want to use this for all classes where we have similar properties. Extends are used if the classes have something in common, otherwise use mixins.

EXTENDS

// SCSS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;

  border-color: green;
}

// Rendered CSS

.message,
.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

ADVANCED CONCEPTS: @if / @else

// SCSS

@mixin simple-mixin($isBlock) {
    @if $isBlock {
        display: block;
    } @else { 
        display: inline;
    }
}

.block {
    @include simple-mixin(true);
}

// Rendered CSS

.block {
    display: block;
}

Pretty much the same as in any other language, but comparisons are made using only two equals signs (==) instead of three like in JavaScript (===).

@each takes a list, iterates through it and provides us with a value for each iteration.

ADVANCED CONCEPTS: @each

// SCSS

$prefixes: webkit moz ms o;

@mixin prefix($property, $value) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: #{$value};
  }
  
  #{$property}: #{$value};
}

.prefixes {
  @include prefix(box-sizing, border-box);
}

// Rendered CSS

.prefix {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

$prefixes is not a variable, but a list. Comparable to an array.

#{$prefix} is called string interpolation and is used for variable substitution.