Subtree root node, descendent, modifier, and not CSS.

A modifier changes one or several aspects to make it more suitable for a different purpose.

You can stick subtrees into the leafs of other substrees. There is no overlap or interweaving.

So, if you look at some node, you just travel the tree up until you hit the first UpperCaseCamelCase class. That's the structure this node belongs to. It's also the name of the partial.

E.g. this is the "bricks/_Pagination.scss" partial:

  /// Simple pagination for search results and similar things.
  ///
  /// <div class="Pagination">
  ///     <a href="#" class="active">1</a>
  ///     <a href="#">2</a>
  ///     <a href="#">3</a>
  ///     <a href="#">4</a>
  /// </div>

  .Pagination {
  	@include TopMargin;
  	text-align: center;
  	font-size: 0;
  	& > a {
  		background: lighten($lightBlue, 12.5%);
  		color: #fff;
  		display: inline-block;
  		width: $gap;
  		padding: $gapTiny 0;
  		text-decoration: none;
  		margin-left: $gapTiny;
  		font-size: $rootFontSize;
  		&.active {
  			background: $lightBlue;
  			cursor: default;
  		}
  		&:hover {
  			background: $lightBlue;
  		}
  		&:first-child {
  			margin-left: 0;
  		}
  	}
  }

The generated docs: http://i.imgur.com/YFbhWjj.png

If there are any modifiers, a preview (with one line description) will be generated for each of them.

Apart from the reset/normalization and base styles, everything looks like that.