Hierarchical Attribute Styling Conventions 0.1

Hierarchical Attribute Styling Conventions

	Elements Selectors

		Plain

			[_class]
			[_class="mod"]
			[_class~="mod"]
			[_class][mod_]
			[_class][mod_="value"]

			[_class] > *
			[_class] [__class]
			[_class] [__class] > *
			[_class] [__class] [__class]

			[_very-long-class]
			[_very-long-class] [__very-long-class]

		List

			ul[_class] li

		Button

			button[mod_]
			button[mod_="value"]

	Properties Order

		content

		display
		flex
		flex-direction
		grid-template-columns
		grid-auto-flow
		grid-auto-columns
		grid-auto-rows
		grid-gap
		align-self
		align-items
		justify-content

		position
		top
		left
		right
		bottom
		z-index

		width
		height
		min-width
		min-height
		max-width
		max-height
		resize
		object-fit
		overflow

		margin
		padding

		background
		outline
		border
		box-shadow
		filter

		color
		text-shadow
		text-decoration
		text-overflow
		text-align
		vertical-align
		font: 12px family;
		font-size: 12px;
		font-weight: 500;
		line-height
		white-space
		writing-mode

		list-style
		counter-reset
		counter-increment

		opacity
		visibility
		animation: title 1s ease;
		transition: 1s ease property;
		transform
		cursor
		pointer-events

	Example

		<div _header>
			<div __logo></div>
			<div __navigation>
				<a>Home</a>
				<a>About</a>
			</div>
		</div>
		<div _content>
			<div _title>HASC</div>
			<div _title="small">Example</div>
			<div _group="h stack">
				<button primary_>Primary</button>
				<button>Secondary</button>
			</div>
		</div>
		<div _footer>
			<div __copyright></div>
		</div>