Here I mentioned "greater than" (or "bigger than") selector, but while I was reading SMACSS I realized that I don't understand some selectors good enough.

So, here are my examples taken from SMACSS.

Same HTML I am going to use, but with different CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="sidebar">
        I am a sidebar div
        <div>
            and I am inner div
            <div>
                and I am third level div
            </div>
        </div>
    </div>
</body>
</html>

1. With "greater than" selector:

CSS:

#sidebar>div {
    border: 1px solid #333;
}

Looks like this:

I am a sidebar div
and I am inner div
and I am third level div

2. With space

CSS:

#sidebar div {
  border: 1px solid #333;
}
Looks like this:
I am a sidebar div
and I am inner div
and I am third level div
Lets say for example that we have this HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="mainContainer">
        <div class="subContainer">
            <div class="subSubContainer">
                <div class="someText">
                    some text
                </div>
            </div>
        </div>
    </div>

</body>
</html>
and this CSS:
.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 400px;
    height: 400px;
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}
Live example:
some text







Now we will convert just width and height of subContainer in css to percentage, and formula looks like:

width: calc(100 * 200% / 400);
height: calc(100 * 200% / 400);

Where 200% is 200px from subContainer, 400 is 400px from mainContainer and we multiply it with 100 in order to convert calculation to percentage.
The whole css would look something like:

html, body
{
    height: 100%;
}

.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100*400%/1859);
    height: calc(100*400%/1089);
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 200% / 400);
    height: calc(100 * 200% / 400);
    left: calc(100 * 100% / 400);
    top: calc(100 * 100% / 400);
    position: absolute;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 100% / 200);
    height: calc(100 * 100% / 200);
    position: absolute;
    left: calc(100 * 50% / 200);
    top: calc(100 * 50% / 200);;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}
Notice that I added:

html, body { height: 100%; } and formula to calculate height looks like:

height: calc(100*400%/1089);

Because height of my view port is 1089.

One example on dropping shadow.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="myShadow">I am with a shadow</div>
		<div>I am without a shadow</div>
	</body>

</html>

CSS:

#myShadow {
	-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 1.2));
}

Check the example here.

To add three dots at the of too long text can be done with text-overflow: ellipsis.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="textEllipsis">The quick brown fox jumps over the lazy dog</div>
	<body>

</html>

CSS:

#textEllipsis {
	text-overflow: ellipsis;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
}

The only problem with this approach is if you need wordwrap then it seems that you will have to use javascript...