systematic-css

Dynamic classesClasses are often used as targets for DOM queries:document.querySelectorAll( '.popup' );But now we've got fancy new custom data-* attributes for that. And we should use them:document.querySelectorAll( '[data-popup="true"]' );Using data-* attributes – and elements, too – as the exclusive interface between HTMLand JavaScript leaves class attributes as the primary interface between HTML and CSS. This isa convenient dichotomy, and it is one less concern for classes.However it is perfectly fine for modifier classes to be dynamically injected into a documentby a client-side JavaScript program. Dynamic modifiers adopt the "is-" prefix, so we cantell they were put there after the initial page was rendered in the browser. Temporary classesused to transition something from one state to another are named "is-" followed by a verb.Permanent classes that fix the state of something are named "is-" followed by an adjective..is-opening {}.is-open {}.is-closing {}.is-closed {}If a dynamic class belongs to a particular widget, it should be be further prefixed with thename of that widget, written lower case. The purpose is to help us see in the markup whichmodifiers belong to which components. In the following example there are three modifiersthat belong to the Slideshow widget: "slideshow-is-animating", "slideshow-is-showing"and "slideshow-is-hidden". There's another modifier here, "clearfix", but even though it isnested inside the markup for the Slideshow widget we know that it is actually a global modifierthat could be used elsewhere in the wider document, too.Class names 31