Elements sizing

Preferable way to specify all sizing of elements is by using "em" - sizing calculated relative to parent font size, or "rem" - sizing is calculated based on root font size. "rem" is preferrable, because "em" causes more complex calculations.

RGBA and HXLA

For specifying semi-transparent white color it is better to use HSLA color, because of a bit shorter presentation. White in HSLA: hsla(0, 0%, 100%, .5). White in RGBA: rgba(255, 255, 255, 0.5).

currentColor reference

CSS3 introduces a new "currentColor" keyword which can be used as color value. This keyword refers to the nearest "color" property value.
body {
    color: #aabbcc;
}
.text-block {
    padding: 5px;
    border: 1px solid currentColor;
}
In "text-block" declaration "currentColor" will refer to "color" property of "body".
Now let's do a trick and make css code looking like this:
body {
    color: #aabbcc;
}
.text-block {
    padding: 5px;
    border: 1px solid;
}
We remove "currentColor" from border property, but result still left looking the same way, with resolved color of text. This is because "currentColor" is also the default value for a number of css properties such as: border-color, the text-shadow and box-shadow colors, outline-color.

Inherit for elements and pseudo elements

"inherit" value in css always refers to computed value of same property in parent element. When "inherit" is applied to pseudo elements, it refers to computed value of property on elements they were generated on.
body {
    color: #aabbcc;
}
a {
    color: inherit;
}

CSS4 variables

It is great to use CSS4 custom properties for increasing code maintainability. Custom properties are some analogue for variables which are implemented in css preprocessors, but with some important advantages.
html {
    --text-color: #aabbcc;
}
body {
    color: var(--text-color);
}
The important differences between css variables and variables in preprocessors are:
- CSS variables scoping is controlled by cascading, you can override custom property value for each concrete element and it's children.
- CSS variable change is applied on fly on all elements where it is used.
The problem with css variables is that they are not supported in ie 11 and lower.

Semi-transparent borders

Let's look at this code:
body {
    background: #000000;
}
h1 {
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    padding: 20px;
    background: #ffffff;
}
In this example we try to apply semi-transparent white border to our h1 element, but when we check the result we will not see it applied. This issue happens because element background stretches under the element border by default. And it will not be possible to notice border if we have it with color same to background. So, the default value of "background-clip" property is "border-box", and we need to change it to "padding-box" to see expected result
h1 {
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    padding: 20px;
    background: #ffffff;
    background-clip: padding-box;
}
This h1 definition will work as expected.

Implementing multiple borders with box-shadow

In css it is not possible to create multiple borders in some explicit way. Here are workarounds which are commonly used when such need appears:
- Adding multiple elements into markup
- Using border-image

But there is a cleaner way to implement it using the "box-shadow" property. "box-shadow" takes five arguments:
- horizontal offset
- vertical offset
- blur
- spread radius
- color

In our case we are interested in applying only fourth param - spread radius. Combined with zero offsets and blur it will emulate a solid border. And to achieve a multiple borders affect we will apply multiple shadow definitions to box-shadow property:
h1 {
    box-shadow: 0 0 0 5px #0acaca inset, 0 0 0 10px #def5f2 inset;
    padding: 10px;
}
In this case we also added an extra 10px padding to our element, because box-shadow does not effect element sizing, and we had to prevent content of element from being overlapped by box-shadow. That is how we can emulate two borders for an element without an image or a line of html.

The other way to make multiple borders on an element is by using outline. But in this case number of borders is limited ti value of 2, and also border-radius will work on "outline" border not always.

Background position and background origin

There is a frequent task to position backgound considering the "padding" values. The best way to achieve it is to set "background-origin" to "content-box".

Inner border-radius

Inner border radius effect can be achieved with pure css via combination of outline and box-shadow. Outline does not follow outer border radius and saves external angles. While box-shadow follows border-radius and fills inner gaps.
.box {
    background: #aaffbb;
    outline: 5px solid #aaddaa;
    border-radius: 5px;
    box-shadow: 0 0 0 3px #aaddaa;
    padding: 5px;
}

Backgrounds examples implemented in pure css

Striped packbround in css are achieved with "linear-gradient" and "repeating-linear-gradient" properties.
.box {
    background: linear-gradient(#cdef67 25%,
        #f78636 0,
        #f78636 50%,
        #36f7e7 0,
        #36f7e7 75%,
        #f736e7 0);
}
According to gradient specs "0" offset can be used to refer the largest of offsets of previously specified colors, so actually css written above equals to:
.box {
    background: linear-gradient(#cdef67 25%,
        #f78636 25%,
        #f78636 50%,
        #36f7e7 50%,
        #36f7e7 75%,
        #f736e7 75%);
}
Vertical stripes are composed following way:
.box {
    background: linear-gradient(to right, #cdef67 25%,
        #f78636 25%,
        #f78636 50%,
        #36f7e7 50%,
        #36f7e7 75%,
        #f736e7 75%);
}
And here is an example of "polka dot" background using radial gradients:
.box {
    background: #edadab;
    background-image: radial-gradient(#aadada 30%, transparent 0), radial-gradient(#aadada 30%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px;
}
Note that for "background-position" we used value which equals half of "background-size" value.

Example of checkerboard background implementation using svg embedded via data:image src value:
.box {
    background: #eee url("data:image/svg+xml,\
        \
        \
        \
        ");
    background-size: 30px 30px;
}
From this example we can note two things:
- In css we can break a declaration in few lines by using "\"
- Svg background can be easy to implement, and they can be embedded without any extra http request if you use "data:image/" url.

Other notes can be found in following articles.