I'm going over Frontify and I want to inspect an element in Firebug. The element is <div class="mod mod-header fixed open">.
When selecting that element in Firebug's HTML panel, usually you expect to see the styles in the Styles side panel. I see .mod-header listed there but not .fixed or .open. I want to see what these classes do. Why can't I see them?
EDIT: You have to scroll down or click the menu to see those classes.
.fixed is being used as what I would refer to as a scoping selector. A scoping selector may have it's own styles but it's also used to control where it and related CSS selectors can affect other elements. You'll often see modules/components use this approach.
If you look at the first child element of <div class="mod mod-header fixed"> you'll see <div class="row header">. Select that element in your inspector. You'll now notice how .fixed is being used. You'll see the following CSS selector in the inspector window.
.mod-header.fixed .header { z-index: 10; padding: 15px 0; max-width: 100%; box-shadow: 0 1px 5px rgba(0,0,0,.1); } So .fixed and .open are being used to control child elements rather than the element that they're applied to.
It can often be easier to add a single class to the outer most element and setup your CSS selectors accordingly to re-style child elements instead of finding a handful of elements and applying a class to each.
