Sizes : em and px

By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like

@include fontSize(16);

@mixin fontSize($px) {
  font-size: ($px/16) + em;
}

Blank (Space) in :after or :before

:after {
  content: '\00a0';
}

SASS (SCSS) and LESS Syntax:

Calc() function with LESS (Less calc allow to calculate using different units).

width:  calc(~'100% - 50px');

Multiline truncation with ellipsis

/* SASS mixin for multiline*/
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

.block-with-text {
  @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  
}

jQuery Style changes

Add odd, even to a list usin jQuery
Example:
$('div.list-item:even').addClass('even');
$('div.list-item:odd').addClass('odd');

Z-index of position:absolute

To use z-index with the elements position:absolute, all z-index defiend elements mush have position:absolute or position:relative.
Example:
- div-parent (position:relative)
- - div-child-1 (position:absolute)
- - div-child-2 (position:relative) <- here, if you don't set the property, by default it can't define z-index.

Style input's placeholder (SCSS /LESS example)

input {
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-style: italic;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    font-style: italic;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    font-style: italic;
  }
  &:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
  }
}

Remove / Replace the html "Select" (selectbox's) dropdown arrow

  select {
    //Remove default arrow
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &::-ms-expand {
      display: none;
    }
    //Replace with an image
    background-repeat: no-repeat;
    background-image: url("/path_to/selecebox_arrow.png");
    background-position: right;
  }