myCSS - a New Approach to CSS Markup

A New Approach to CSS Markup

I've always thought CSS markup was a jumbled mess. The last thing I look forward to on a project is debugging CSS.

HTML doesn't care if there is whitespace between a tag and its closing bracket. I use that a lot to align my markup into columns. With columns errors stand out. You don't have to look for them. They jump out at you.

While reading through jQuery's source I noticed that many of the lines begin with a comma. That was new to me. jQuery is a master of minimalization: maybe I should do that.

Becoming aware of how the different parsers work let me break free of traditional approaches. Much of what I see comes from times before GUIs and our only tools were simple line editors. Old habits die hard. So I changed my way of doing markup to take advantage of how parsers work.

That's how "My CSS" came about. No free form. Constrained. Searchable with common tools. Easy for me, hence the name.

Jargon and Constraints

    Examples
    }@media      {   single line @ selector
    }#id         {   single line id selector
    }.class      {   single line class selector
    } element    {   single line element selector
    }#id             first line of multi-line selector
    ,.class          subsequent multi-line selector
    , element    {   last line of multi-line selector
    /*comment -- every comment line must end with */
    }Xspan       {   smudged element
    }Xleft: 0;       smudged rule
    }#myId       {
    }XmyId       {   id selector + smudge; del line to de-smudge
    }.myClass    {
    }XmyClass    {   class selector + smudge; del line to de-smudge

      column 1 : the rail [ },/]
      may contain space, right brace, comma, forward slash

      column 2 : the gutter [ @#.*X]
      may contain space, at sign, hash mark, dot, star, smudge

      column 3 : the body continues until the end of the line.
      may contain id and class labels, elements, rules, comments

Setup

  
  <style>X{;

  }</style>
     Set up your <style> tags like this.

    To be valid css a rule must be named
    (have a selector: that's the X).  Empty
    braces are not allowed and don't validate,
    hence the semicolon.
                                                                  
    This technique passes the W3C Validator


  
  }#sales {
    width   : 8rem;
    color   : blue;

  }.teams {
    padding : 1rem;
     
    All selectors close the previous
    selector's ruleset and
    open their own: right brace is
    on the left of the selector,
    left brace is on the right.

    It saves a line and frames 
    each selector nicely.  IMO it
    makes better looking markup.
    It also makes for easy grepping.

Debugging and experimenting with your styles

Use a smudge. A smudge is a character not normally use in rules and selectors and is used to break them safely. I use a capital X.
}X
A smudge in the gutter safely breaks things; parser ignores those lines.
} blockquote {
}Xblockquote { has a smudge, won't validate, rules get skipped
To smudge a selector copy it onto the following line and smudge the copy.
}.search > div {
}Xsearch > div { broken selector: parser ignores following rules
A smudged selector won't match anything and gets ignored. The original un-smudged selector has no rules and is ignored.
}.search > div { deleted smudged selector restores rules
Does a rule do what you want? Smudge it and reload the page. If it doesn't do what you want get rid of it.
Xborder-left : 3px dotted indigo;
You don't always have to smudge. Duplicate a rule and modify the copy. Discard the original or the copy depending on the results of your test.
border-left : 3px dotted indigo;
border-left : 2px solid goldenrod;
Smudging comments doesn't work.
Why are the : characters in a column? Debugging takes precious time. I like to use columns and organize things in a consistent manner. If something is out of place I want it to jump out at me. Once you start exploring with grep you'll really start to appreciate consistency in how you organize and write your selectors and rules.

Exploring your CSS with grep
  grep is a nix program.  A similar MS program is findstr.
 
  Search for All Selectors
  grep -E "^(}|,)" filename

  Search for @ Selectors
  grep -E "^}@" filename

  Search for ID Selectors
  grep -E "^}#" filename

  Search for CLASS Selectors
  grep -E "^}." filename

  Search for Smudged Selectors
  grep -E "^}X" filename

  Search for Smudged Rules
  grep -E "^ X" filename

  Search for Comments
  grep -E "^/" filename

  Search for Rule Blocks
  grep -E "^  |^$" filename
  Extra points^*

  ^*Follow the grep command with -A, -B, or -C to see lines After,
   Before, or on both sides of the Center.  Specify how many lines
   by adding a number after the -ABC.  Because I often put a comment
   after a selector I use this to see the selector, comment, and a
   few rules all at once:

         grep -E "^/" -B1 -A3 filename

   Note that the options can appear before or after the filename.

Q: Why didn't I just search for selectors with -A4?  That would give
      me the same four lines.

A: I use far fewer comments than selectors so the results are fewer
      and easier to go through.