.box {
    /* margin and padding is not necessary, but I want something to be here (and use BEM) */
    margin: 0;
    padding: 0;
}

.box--active {
    width: 200px;
    margin: 200px;
    height: 500px;
    background-color: #00f;
}

.box--alert {
    width: 500px;
    margin: 100px;
    height: 200px;
    background-color: #f00;
}

.box--container {
    width: 400px;
    position: relative;
    height: 300px;
    background-color: lightblue;
}

.box--desc {
    width: 400px;
    padding: 30px;
    height: 300px;
    border: 1px solid purple;
}

.box--hidden {
    visibility: hidden;
}

.box--none {
    display: none;
}

.box--success {
    width: 200px;
    height: 500px;
    background-color: #0f0;
    opacity: 0.5;
}


.box--wide {
    padding: 50px;
    height: 150px;
    border: 10px solid #000;
    background-color: #00f;
}

.box__p {
    /* margin and padding is not necessary, but I want something to be here (and use BEM) */
    margin: 0;
    padding: 0;
}

.box__absolute-item {
    right: 10px;
    position: absolute;
    height: 50px;
    background-color: pink;
}

.box__absolute-item--little-square {
    width: 50px;
    top: 50px;
}