Selector usage specification

Selector Types and Specificity

CSS selectors determine the scope of style rules, and their proper use enhances code maintainability. Common selector types include:

1. Element Selector: Directly matches HTML elements

p {
  color: #333;
}

2. Class Selector: Matches via the class attribute

.btn-primary {
  background: blue;
}

3. ID Selector: Matches via the id attribute

#header {
  height: 80px;
}

4. Attribute Selector: Matches based on element attributes

input[type="text"] {
  border: 1px solid #ccc;
}

5. Pseudo-class Selector: Matches specific states of elements

a:hover {
  text-decoration: underline;
}

Selector Combination Methods

Combining selectors effectively allows precise control over style application:

1. Descendant Selector (separated by spaces)

.nav li {
  display: inline-block;
}

2. Child Selector (>)

.menu > .item {
  padding: 8px;
}

3. Adjacent Sibling Selector (+)

h2 + p {
  margin-top: 0;
}

4. General Sibling Selector (~)

h1 ~ p {
  font-size: 1.1em;
}

5. Multiple Selector (comma-separated)

h1, h2, h3 {
  font-family: sans-serif;
}

Selector Specificity Rules

When multiple rules conflict, browsers determine the final style based on specificity:

1. Calculation Rules:

   • Inline styles: 1000
   • ID selectors: 100
   • Class/attribute/pseudo-class: 10
   • Element/pseudo-element: 1
   • Wildcard: 0

2. Example Comparison:

#content .title { /* 100 + 10 = 110 */
  color: red;
}

div#content span.title { /* 1 + 100 + 1 + 10 = 112 */
  color: blue;
}

3. !important Exception:

.special {
  color: green !important; /* Highest priority */
}

Selector Performance Optimization

Efficient selectors improve page rendering performance:

1. Avoid Over-Qualification:

/* Not recommended */
div#nav ul li a {}

/* Recommended */
.nav-link {}

2. Minimize Wildcard Usage:

/* Not recommended */
* {
  box-sizing: border-box;
}

/* Recommended */
html {
  box-sizing: border-box;
}

3. Prefer Class Selectors:

/* Not recommended */
section:first-child h2 {}

/* Recommended */
.section-title {}

4. Avoid Deep Nesting:

/* Not recommended */
body div#wrapper ul.nav li a {}

/* Recommended */
.nav-link {}

BEM Naming Convention

BEM (Block Element Modifier) is a popular CSS naming methodology:

1. Basic Structure:

   • Block: Independent functional unit
   • Element: Component of a block
   • Modifier: State or variation

2. Naming Examples:

/* Block */
.menu {}

/* Element */
.menu__item {}

/* Modifier */
.menu__item--active {}

3. Practical Application:

<nav class="nav">
  <a class="nav__link nav__link--current">Home</a>
  <a class="nav__link">Products</a>
</nav>

Selector Maintainability Practices

Practical tips for maintaining selector readability:

1. Semantic Naming:

/* Not recommended */
.red-box {}

/* Recommended */
.alert-warning {}

2. Avoid Location Dependency:

/* Not recommended */
.header .logo {}

/* Recommended */
.site-logo {}

3. Use Prefixes for Differentiation:

.js-toggle {} /* JavaScript hook */
.is-hidden {} /* State class */

4. Modular Organization:

/* button.module.css */
.primary {
  /* Button styles */
}

/* Automatically generates unique class names to avoid conflicts */

Selectors in Responsive Design

Key points for using selectors in media queries:

1. Mobile-First Principle:

/* Base styles (mobile) */
.card {
  width: 100%;
}

/* Large screen adaptation */
@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

2. Device-Specific Selection:

/* Tablet devices only */
@media (hover: hover) and (pointer: fine) {
  .tooltip:hover::after {
    display: block;
  }
}

3. Orientation Detection:

@media (orientation: portrait) {
  .header {
    height: 60px;
  }
}

Selector Nesting in Preprocessors

Nesting standards in Sass/Less:

1. Reasonable Nesting Depth:

/* No more than 3 levels */
.menu {
  &__item {
    &--active {
      color: red;
    }
  }
}

2. Avoid Excessive Nesting:

/* Not recommended */
body {
  div {
    ul {
      li {
        a {
          color: blue;
        }
      }
    }
  }
}

/* Recommended */
.menu-link {
  color: blue;
}

3. Parent Selector Reference:

.btn {
  &:hover {
    opacity: 0.8;
  }
  
  &--large {
    padding: 12px 24px;
  }
}