[10/18] 100% Оцените пожалуйста код

/* Используемые цвета:

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

.formula {
    margin: 10px;
    width: 500px;
    display: table;
    border-collapse: collapse;
    text-align: center;
}

.formula p {
    display: table-caption;
    caption-side: bottom;
    margin: 0;
    padding: 10px;
    font-size: 20px;
}

.formula ul {
    list-style: none;
}

header {
    display: table-header-group;
    background-color: #ffffff;
}

.content {
    display: table-row-group;
}

.content ul, header ul {
    display: table-row;
}

.content ul li, header ul li {
    display: table-cell;
    padding: 5px;
    border: 1px solid #777777;
    vertical-align: middle;
}

.column-group {
    display: table-column-group;
    background-color: #b2fdd0;
}

.column {
    display: table-column;
}

header ul li {
    border-bottom: none;
}

.column.column-last {
    background-color: #ffbaba;
}

.content-important {
    background-color: #fffebc;
}

Почему это нужно?

на мой взгляд лишнее:

.formula ul {
list-style: none;
}

по мелочам:

.content ul, header ul {
display: table-row;
}

тут либо
.formula ul {
}

либо

.content ul,
.header ul {
display: table-row;
}

.content ul li, header ul li {
<…>
} - то же самое, я бы использовал

.formula li {
}

.formula {
margin: 10px;
width: 500px;
display: table;
border-collapse: collapse;
text-align: center;
}

.formula ul {
display: table-row;
list-style: none;
}

.formula li {
display: table-cell;
border: 1px solid #777777;
padding: 5px;
vertical-align: middle;
}

.formula p {
display: table-caption;
caption-side: bottom;
margin: 0;
padding: 10px;
font-size: 20px;
}

.formula header {
display: table-header-group;
background-color: #ffffff;
}

.formula .content {
display: table-row-group;
}

.formula .column-group {
display: table-column-group;
}

.formula .column {
display: table-column;
background-color: #b2fdd0;
}

.formula .column-last {
background-color: #ffbaba;
}

.formula .content-important {
background-color: #fffebc;
}