Child selectors follow the pattern E > F where F is an element, and E is its immediate parent. You’ve probably used child or descendant selectors in your code. The section on BEM methodology later on describes a process for this. For class names that define page layout, add a prefix such as layout-, grid-, col-, or simply l- to indicate at a glance what it is they do. These names indicate how the class should be used and the kind of content (error messages) that they affect. But what happens if the design changes and error messages become black text inside orange boxes? Now your class name is inaccurate, making it tougher for you and your colleagues to understand what’s happening in the code.Ī better choice in this case is to use a class name such as. Using class="red-text" to mark up an error message does work. What’s wrong with these? They are too tightly coupled to the existing design choices. We also want names that will endure changes in the design requirements. Class names should describe what the rule does or the type of content it affects. When we use the word semantic, we mean meaningful. Overly specific selectors are often the result of too much preprocessor nesting. Yet the far better approach-for both reusability and to minimize the number of bytes-is to use a class name instead. We can immediately trim our selector to #stats tr:nth-child(even) td:last-child. How many possible instances of this selector can there be in your markup? Let’s make this better. Not only is it absurdly long, but with a specificity of 2,3,4, it’s also not reusable. Using an id selector reduces the chances of those styles being accidentally overridden.įinally, let’s talk about selectors such as #main article.sports table#stats tr:nth-child(even) td:last-child. This component must be consistent across sites in the network, and should be hard to restyle. For example, a network of media sites might wish to use the same navigation bar across all of its web properties. In some circumstances, you might want the higher specificity of an id selector. Note: When the High Specificity of id Selectors is Useful Though it lacks the reusability of a class selector, the low specificity means that we can avoid chaining selectors. Using an attribute selector such as lets us get around the higher specificity of an identifier. local rule sets can now be added to other elements. Here’s an example: button Īs well as saving us a few bytes, our. Style declarations applied to these selectors will be applied to every such element across the site. Global selectors include the universal selector ( *), element selectors such as p, button, and h1, and attribute selectors such as.
0 Comments
Leave a Reply. |