I am relatively new to UI development and I find CSS to be quite challenging to work with.
Scenario: [ Experimented with CSS & less ]
I wanted to apply specific styles within a particular div on a page.
CSS approach :
div.class1 {
font: normal 12px arial, helvetica, sans-serif;
color: #f30;
}
div.class1 div.class2 {
border: 1px solid #f30;
}
Less approach :
@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
font: normal 12px @font-family;
color: @red;
div.class2 {
border: 1px solid @red;
}
- When writing CSS, it can lead to errors as you need to repeat
#f30&div.class2multiple times for hierarchy and variable re-use.
My Inquiry :
- Why does CSS seem to complicate things?
- Is Less simply enhancing and converting to CSS without offering anything unique?
- What is the reasoning behind CSS promoting such repetitive coding practices?
I believe CSS should adopt the simplicity of Less. Perhaps I'm missing an important aspect of why CSS is structured that way.
I initially thought this was an outdated issue, but I was surprised by the lack of solutions in CSS3.
Please guide me on how to approach CSS more effectively.