2 front-end tips to keep in mind — First published in fullweb.io issue #68

2-front-end-tips-to-keep-in-mind.md

2 front-end tips to keep in mind

1. Stop using .innerHTML = ''; when removing children to a DOM element.

On modern browsers it seems to be about 400× (!!) slower than this DOM-friendly method:

while (el.firstChild)
    el.removeChild(el.firstChild);

2. Simplify your CSS when inlining element.

Often we see or write such code:

.item {
  margin-right: 10px;
}

.item:last-child {
  margin-right: 0px;
}

But truth be told, as we have the :not() selector since IE9+, we could more concisely write:

.item:not(:last-child) {
  margin-right: 10px;
}

I wonder what the performance differences would be between the CSS selectors?