systematic-css

ModifiersWhen something needs to be presented slightly differently than normal, give it a modifierclass. Modifiers can be used in lots of different contexts. A modifier could be:––Global.––Specific to one or more element types.––Specific to a widget.––Specific to certain elements within a widget.––Specific to a section of the layout.Some modifiers may be dynamic, swapped in and out of the markup by client-side scripting.Modifiers are written full lower case with words delimited by hyphens: "is-required","sidebar-is-hidden" and "contextmenu-selected", for example. The first letter must be analphanumeric character; hyphen prefixes ("-modifier") are illegal, as they ae reserved forbrowser vendors.Modifier classes are optional. It should not be necessary to apply modifiers to achievea default presentation. Modifiers should only tweak and extend the default presentation. Adocument stripped of all its modifier classes should render perfectly well. There are a fewspecial cases; you might need to apply the clearfix hack, via a modifier called "clearfix", toachieve the desired default presentation, for example.Modifier classes should be highly specialised, each setting just a few narrow properties. Forthis reason we should prefer explicit and expressive names for modifiers, rather than the moreabstract names preferred for layout sections and widgets. There can be no ambiguity aboutwhat the modifiers "text-shadow" and "is-collapsed" do.High-fidelity designs will inevitably end up with lots of modifiers littered about the HTML.That's okay. The convenience of modifiers in such designs makes up for any difficulties inmaintaining neat and tidy markup.Modifiers 54