2

I find css quite hard to read sometimes. Indents, depending on the dom structure, would greatly increase readability. Consider the following example:

#page {
    text-align:center;
    font-weight:bold;
}
    #page p {
        white-space:nowrap;
    } #page p:hover {
            display:inline-block;
    }
    #page .myclass {
        text-align:left;
    }
        #page .myclass a {
            text-decoration: none;
        }
#footer {
    display:none;
}

Simple question: Why is nobody using intends in any way near to this? Even phpstorm does not support such indents by default: I have to navigate with -> and del inconveniently.

It seems that by convention, all css selectors have to start at the leftmost indent. This doesn't make sense to me, since I have literally never seen a stylesheet which even reached the rightmost edge of my monitor. Typical css sheet below.

enter image description here

|improve this question

closed as primarily opinion-based by amon, Ixrec, Robert Harvey♦, Bryan Oakley, gnat Apr 8 '16 at 0:10

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 6
    Indentation, in my experience, should match syntax, not semantics. By indenting further, many coders might briefly think that it's somehow part of the same syntactical rule that was above, decreasing code readability even if it's meant to improve semantic readability. LESS, a CSS transpiler, happens to make this easier by actually providing special syntax for the above situation, in which the first curly brace does not close. – Katana314 Apr 7 '16 at 13:38
  • 2
    There css preprocessors that support nesting, which is similar to what you want, but without being as ugly. – CodesInChaos Apr 7 '16 at 13:42
3

No one is doing that because it does not make sense from a syntactical perspective. While it conceptually makes sense to indent items that have a child relationship with a parent item, it does not work well in practice for CSS.

Keep in mind that there is a distinction between DOM nodes and CSS selectors. Although elements may be nested within each other in the DOM, selectors are not nested within each other. In your example, #page p is actually not a child of #page; they refer to two distinct paths within the DOM.

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.