StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy CSS does not support function-like constructions?
text
Body
copied!<p>I am mostly a backend programmer, and am relatively new to CSS. So far, I hate it. My biggest complain is that is incredibly redundant and difficult to produce readable code. </p> <p>Many times I need to apply styling to different but similar elements. However, I find it incredibly challenging to produce elegant code to do that. </p> <p>The most simple way to do things in CSS seems to be to give an ID to everything and use custom code for every single element in the page, or classes when there are repeated elements with. However, this still leaves a lot of repeated code, like when I have two elements that are almost exactly alike, but have one or two different attributes, like width, background color, color or float side.</p> <p>My current solution is defining many atomic classes, like </p> <pre><code>.bgRed { background-color: red; } .bgBlue { background-color: blue; } .fontCenter { text-align:center; } .left { float: left; } </code></pre> <p>and so on, and applying multiple classes to an element, like this:</p> <pre><code><span class='bgRed left' >My text</span> </code></pre> <p>But that's still very short of decent. Some attributes, like width and height, are usually strongly tied to it's elements, so I can't create an atomic class for it, and end up resorting to using it's ID. </p> <p><strong>Finally, my question:</strong> Why doesn't CSS support some kind function-like structure? Would a feature like this be useful in CSS? Is CSS badly designed or I just don't know how to use it properly? Why was CSS designed the way it is?</p> <p>How I imagined functions in css would work:</p> <p>Defining a css function:</p> <pre><code>_sidebar(float_side, color, width){ float: float_side; backgroud-color: color; width: width: height: 200px; color: #FE02A5 list-style: none; display: table; } </code></pre> <p>And applying:</p> <pre><code><div cssfunc='sidebar(left, #FF0000, 150px)' > <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </code></pre> <p>Bonus question: How do you maintain you CSS code readable and organized, with minimal code repetition?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload