systematic-css

Layout modifiersModifiers can also be used to tweak the default presentation of sections of the layout.Layout modifiers should be prefixed with the name of the section that they modify,converted to lower case. The point is to reduce the chances of the same class name being usedfor two unrelated things, which might cause unexpected property leakages. And it makes iteasier to see in the markup what things each modifier class belongs to.Layout modifiers should be further qualified against the class name of the layout sectionthat they modify. This just locks things down that little bit more, and it's not going to be sucha big issue if a layout modifier is accidentally used in the wrong place..SECTION.section-modifier { ... }Example:.BANNER.banner-homepage { height: 100vh; }Widget modifiersModifiers may be needed for widgets, too. They should use the same naming conventionas for layout modifiers, taking the name of their parent widget as a prefix and beingfurther encapsulated by the parent widget class name, too. In the following example the"popup-alert" modifier is designed to be applied to the same element that encapsulates awidget called Popup. The "popup-alert" modifier may change the default presentation of thatencapsulating element, or of any elements nested inside it that make up the widget's structure..Popup.popup-alert { border-color: red; }Modifiers 57