I am new to UI development, but I feel very uncomfortable with how CSS works.
My use case is that I wanted to apply some specific styles inside a particular div
on a page.
CSS attempt:
div.class1 {
font: normal 12px arial, helvetica, sans-serif;
font-color: #f30;
}
div.class1 div.class2 {
border: 1px solid #f30;
}
LESS attempt:
@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
font: normal 12px @font-family;
font-color: @red;
div.class2 {
border: 1px solid @red;
}
The CSS version can induce bugs, since it forces you to repeat #f30
& div.class2
every time you try to achieve hierarchy and variable re-use.
My questions:
- Why is that CSS makes things difficult?
- LESS does nothing special - just makes obvious improvements and translates to CSS?
- What is that CSS wants to motivate in users because of which it promotes such a redundant coding style?
I strongly believe CSS should be what LESS is. Definitely I am overlooking some obvious advantage of why things are done that way in CSS. I thought it was a legacy problem, but I was surprised when I saw no attempts to solve this with CSS3.
Please help me understand how should I approach CSS?