Focus on your own progress

Everyone is learning

HTML

• Semantic Code
• Accessibility
• IDs vs classes

Semantic Code

• Properly describes components on the page, e.g. <header>, <footer>, <aside>
• Results in shorter and cleaner code, easier to read for developers
• Aids screen readers in interpreting the page
• Allows search engines to understand the page, possibly improves ranking

Semantic Code

Instead of this...

 
 

  

    
My Web Page
  
  
 

 
										

Type this!

 

  

    
My Web Page
  
  


										

Accessibility

• Alt text in images
• ARIA roles

Alt Text in Images

• Describe the image
• Keep it short and concise
• Emphasize the subject related to the content
• Decorative images can be ommitted with alt=""

ARIA Roles

• Accessible Rich Internet Applications
• Defines dynamic content and behavior
• Can indicate page structure, widgets, drag and drop areas, checkboxes, etc

ARIA Roles

 

  

    
My Web Page
  
  


							

Resource: developer.mozilla.org

ARIA Roles

ARIA Roles

                            

    Expand well



    

        This is a well.
    

                            
                        

IDs vs Classes

• IDs are unique to one element, classes can be assigned to multiple elements
• IDs have higher specificity than classes
• IDs may be used as page anchors
• IDs can be used as behavioral flags for Javascript functions

Use IDs only for page anchors and Javascript listeners.

CSS

• Specificity
• Naming Schemes
• DRY code

CSS

• Specificity
• Naming Schemes
• DRY code

Specificity

• Know how CSS cascades
• Understand !important

Specificity

Order of priority:

1. Inline styles - <div style="width: 400px;">
2. IDs - <div id="card">
3. Classes - <div class="card">
4. Elements and pseudo-elements - <div>

Specificity

							

  

    Hello world!
  

						

							.red {
  background-color: #ff6666; /* red */
}

.card {
  background-color: #ccc; /* gray */
}
						

Specificity

							

  

    Hello world!
  

						

							.card p {
  color: #008000; /* green */
}

.greeting {
  color: #000; /* black */
}
						    

.card p will apply.

Specificity

In cases of nested or mixed selectors, the browser makes a calculation, e.g. div.card p vs p.greeting. Can become complex very fast!

Specificity Calculator: specificity.keegan.st

Understanding !important

							.red {
  background-color: #ff6666 !important; /* red */
}

.card {
  background-color: #ccc; /* gray */
}
						

!important Muddles Specificity

							.red {
  background-color: #ff6666 !important; /* red */
}

.card {
  background-color: #ccc; /* gray */
}

div {
  background-color: #000033 !important; /* blue */
}
						

Code quality decreases and can cause confusion.
Avoid it when you can.

Naming Schemes

• Consistent
• Logical
• Modular

Examples: BEM, Atomic, OOCSS

source: hongkiat.com

Naming Schemes

Things to consider:

• Components - .banner, .listing, .book-review
• Variants - Blue .card vs red .card
• States - .active, .disabled

Naming Schemes

								

  

    My Book Review
  
  

    
 This book is awesome! 
  

								
						

							.review {
  // ...
}

.review__title {
  // ...
}

.review__content {
  // ...
}
						

Naming Schemes

• Keep HTML classes structural
• Describe component's state or content rather than style, e.g. <button class="disabled"> instead of <button> class="gray">
• Break down components into child components when necessary

Naming Schemes

								

  

    
...
	
 This book is awesome! 
	

	  
...
	
  
  

						

							.review-content {
  // ...
}

.review-content__cover {
  // ...
}

.review-content__list {
  // ...
}
						

Keep Code DRY

(Don't Repeat Yourself)

Subscribe
Submit
						

button.active {
  color: #fff;
  text-transform: uppercase;
  background-color: #000033; /* blue */
  border-radius: 5px;
}

button.disabled {
  color: #fff;
  text-transform: uppercase;
  background-color: #ccc; /* gray */
  border-radius: 5px;
}
						

Styles that apply to multiple states or components can be bundled into one class.

Keep Code DRY

							Subscribe
Submit
						

							.button {
  color: #fff;
  text-transform: uppercase;
  border-radius: 5px;
}

.button.active {
  background-color: #000033; /* blue */
}

.button.disabled {
  background-color: #ccc; /* gray */
}

.button.success {
  background-color: #008000; /* green */
}
						

Form Good Habits

• Formatted code
• Comments
• Documentation

Formatted Code

							
 
 
 
 
My Web Page
 
 
 
							
						

Formatted Code

							
 

  

	
My Web Page
  
  


						

Comments

							

  

    

      

        Hello there!
      
    

   


						

Comments

							.navbar-default {
  -webkit-transform: translateZ(0); /* Chrome scroll bug fix */
  position: relative;
  font-size: 1.1em;
}
						

Documentation

• Staff wiki
• Workflow walkthrough
• Style guides