Practical Custom Selectors

Practical Custom Selectors are a collection of meaningful selector patterns designed to help you write cleaner, scalable, and easier to maintain CSS.

They are built upon W3C CSS Extensions and inspired by Nicole Sullivans fantastic Object Oriented CSS.

npm install --save-dev jonathantneal/practical-custom-selectors

Usage

Practical Custom Selectors are used like pseudo-classes. Their purposeful names make them highly readable and reusable.

Before:

a, area, button, input, label, select, textarea, [tabindex] {
	cursor: pointer;
	touch-action: manipulation;
}

After:

:--clickable {
	cursor: pointer;
	touch-action: manipulation;
}

They become even more helpful when nesting is required.

Before:

button, [type="button"], [type="reset"], [type="submit"] {
	background-color: #44f;

	& :hover, & :focus {
		background-color: #22A;
	}
}

After:

:--control-button {
	background-color: #44f;

	&:--enter {
		background-color: #22A;
	}
}