CSS Classes

Joel Ross

LIS 549

In this video...

  • CSS Class Selector

  • The "cascade"

  • Choosing class names

Class Selectors

Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS

/* CSS */
.highlighted { 
  background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>

dot specifies class name, not tag name

Multiple Elements

A rule with a class selector will apply to any element with that class, regardless of its tag.

<!-- HTML -->
<p class="green">This text is .green!</p>
<ul>
  <li class="green">This text is too!</li>
</ul>

Multiple Classes

An HTML element can have multiple classes. They are listed in the same class attribute, but separated by a space.

<!-- HTML -->
<p class="first-class second-class third-class">
  This element has 3 classes
</p>
<p class="alert warning">
  This element has both the .alert and .warning classes  
</p>

CSS

Cascading Style Sheets

The Cascade

Multiple rules can apply to the same element (in a "cascade").

p { /* applies to all paragraphs */
  font-family: 'Helvetica'
}

.alert { /* applies to all elements with class="alert" */
  font-size: larger;
}

.success { /* applies to all elements with class="success" */
  color: #28a745; /* a pleasant green */
}
<p class="alert success">
  This paragraph will be in Helvetica font, a larger
  font-size, and green color, because all 3 of the above
  rules apply to it.
</p>

two classes (space separated)

Specificity

If two rules "conflict" (they specify different values for the same property), then the more specific rule wins.

If two rules are equally specific, the later rule wins.

Class selectors are more specific than tag selectors.

p { /* tag selector, less specific */
  color: blue;
}

.husky { /* class selector, more specific */
  color: purple;
}
<p class="husky">
  This paragraph will be purple because the class 
  selector is more specifc, so overrides the other.
</p>

CSS Class Names

There are only two hard problems in computer science: cache invalidation and naming things - Phil Karlton

CSS Class Names

Goals when naming classes (or anything):

  1. Understandability: explain what kind of styling is being applied
     

  2. Modifiability: make it easier to change styling later

Semantic Class Names

Name CSS classes based on the semantic meaning (purpose) of the element they are styling.

<div class="forum-post">...</div>

<nav class="side-nav">...</div>

<img class="avatar-icon">...</div>

<article class="breaking-news">...</article>

https://css-tricks.com/semantic-class-names/

/* can use descendant selectors for more detail */
.forum-post img { ... }

.side-nav ul a { ... }

Modular Class Names

Name CSS classes based on the (single) styling they apply. Combine multiple classes to style elements.

<div class="font-large text-red bg-secondary">...</div>

<img class="small rounded shadow">...</div>
.font-large { 
  font-size: 2em; 
  line-height: 1.4em;
}
.bg-secondary { background: #bbb; }

img.small { width: 140px; }
.rounded { border-radius: 50%; }

https://css-tricks.com/semantic-class-names/#comment-102547

A Naming Schema: BEM

http://getbem.com/naming/

<div class="block__element--modifier">
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text">
  <input 
     class="form__submit form__submit--disabled" 
     type="submit" />
</form>

The "part" of the page
navbar

An element in that block
tab

Flags or types; differentiators
selected 

<div class="navbar">
  <div class="navbar__tab">A tab</div>
  <div class="navbar__tab--selected">Selected Tab</div>
</div>

http://bit.ly/freecodecamp-bem