A collection of meaningful properties and functional classes designed to help you write cleaner, scalable, and easier to maintain CSS
Practical Styles are a collection of meaningful properties and functional classes designed to help you write cleaner, scalable, and easier to maintain CSS.
They are built upon CSS Custom Properties and the CSS Functional Classes.
npm install --save-dev jonathantneal/practical-styles
Practical Styles are used like extensions for rules. Their purposeful names make them highly readable and reusable.
.my-image {
@extend %ratio, %ratio-cinema;
}
/* becomes */
.my-image {
display: block;
position: relative;
}
.my-image::before {
content: "";
display: block;
padding-top: 41.841%;
}
.my-image > :first-child {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Apply sizing, padding, and borders more intuitively to an element and all of its descendants. See the rule and its atomic variation.
.some-selector {
@extend %border-box;
}
/* becomes */
.some-selector {
&, &::before, &::after {
box-sizing: border-box;
}
}
Apply a greater variety of easings to animations and transitions. See the properties.
.some-selector {
transition-timing-function: var(--ease-out-quad-timing);
}
/* becomes */
.some-selector {
&, &::before, &::after {
box-sizing: border-box;
}
}
Selectively normalize the appearance of native elements in all browsers. See all the available normalizations and their atomic variations.
.some-selector {
@extend %normalize-button;
}
/* becomes */
.some-selector {
-webkit-appearance: button;
margin: 0;
overflow: visible;
text-transform: none;
&::-moz-focus-inner {
border-style: none;
outline: 1px dotted ButtonText;
padding: 0;
}
&:-moz-focusring {
outline: 1px dotted ButtonText;
}
}
Size containers using aspect ratios. See all the available ratios and their atomic variations.
.some-selector {
@extend %ratio, %ratio-16x9;
}
/* becomes */
.some-selector {
display: block;
position: relative;
&::before {
content: "";
display: block;
padding-top: 56.25%;
}
& > :first-child {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
Selectively unset native element styles in all browsers. See all the available unsets and their atomic variations.
.some-selector {
@extend %unset-input;
}
/* becomes */
.some-selector {
background-color: transparent;
border-width: 0;
color: inherit;
font: inherit;
margin: 0;
padding: 0;
}