Performance inside your CSS

While creating an app or website with AngularJs you should also care about your CSS-Performance.

Indeed, fixing your CSS is mainly the last part where you would have a look when having performance issues.

But there a some rules which you should follow from the beginning to exclude those problems/searches from the start.

CSS-Attributes

Border-Radius

The border-radius attribute is one of a performance issues, because the browser needs to repaint the radius each time.

Box-Shadow

With CSS3 you can use box-shadows but like the border-radius this will cause performance issues.

Tip: If you need box-shadows maybe try an border with 1 or 2-pixel and an RGBA-Color:  
border: 1px solid rgba(0, 0, 0, .14);

Opacity

If you need to use opacity to show or hide an element, this attribute will take care about.

But if you're using opacity to paint a color with an alpha-channel rather use rgba(0,0,0,0.5)

animation/-webkit-animation

Like written in my other posts, I don't like animation much because they are a heavy performance-bottleneck if used wrong.

So my advice: Use a professional framework, use it very rarely or like me: don't use it.

Special IE has much problems with animation.

If you're using animation the will-change attribute would be one attractive feature for you.

will-change

Use the will-change attribute for changing elements on your page/app.
Sadly IE doesn't support this tag: http://caniuse.com/#search=will-change

For more information about this tag have a look here: https://developer.mozilla.org/de/docs/Web/CSS/will-change

background-linear-gradient

Same as border-radius or box-shadow if not needed, don't use linear-gradient.

Color

Color attributes are not a real performance problem, but try not to write:

color:black;

Instead use:

color: #000;

or 

color: rgb(0,0,0);


Because this # or rbg will be interpreted faster then black.

CSS-Selectors

CSS-Selectors come to a common problem while using jQuery, because everything can be easily accessed, but even here, you can tweak your CSS.

#ID

This one is the fastest selector.

.class

This one is closing up the #ID.

So that isn't so special but you should avoid selectors like:

• element-name
• :first 
• :hover
• :active
• :not

And some more of this checks, use them wisely and not globaly on all elements.

HTML-5-Elements

After HTML5 introduced own element names I came across the problem that I used element-names instead of classes, which headed into a performance problem, becaused I used them too much.
Specially on IE I saw a performance increase of 1 second after my changes.

This problem will likely show up if you're using a JS/CSS-Framework with custom elements.

So if you don't need to framework for this, just create an own class and style your div element.
Keep it simple!

Sample:

<element-name/>
element-name{
color:#000;
}

Rather use:

<div class="black-color" />
.black-color
{
color:#000;
}

CSS global tips

Everyone has seen them already, but for the sake of completeness:

1. Avoid big CSS-Rules
2. Avoid big CSS-Files
3. Avoid unnecessary CSS-Selectors
4. Avoid animation
5. Avoid big CSS-Selectors
6. Avoid multiple CSS-Files (concat them!)
7. Avoid unminified CSS-Files (minify them!)
8. Avoid unnecessary CSS-Frameworks

This should be common rules. After I sorted out the CSS I didn't even use on my Angular-Project I dismissed more then 80 000 lines of generated CSS.

The removal of the 80 000 lines of unneeded CSS let my app start 1-2 seconds faster, and the rendering got speed up aswell.

Read More