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
2
  • 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, 2016 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, 2016 at 13:42

1 Answer 1

Reset to default
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.