Styling a Component

What are a few things we need to pay attention to when making a custom component?

• Isolate your CSS to prevent external conflicts?
• Enforce specificity to prevent external conflicts?
• What can we do to make it more user friendly?

Component Definition

How to build a component that resembles a facebook post or tweet.

• A post container.
• A post title, body
• A post author and picture
• Social Actions - Share, Like

Create a SCSS Partial

Create a _post.scss file and work exclusively in it.

Base Class

Think of a base class that will act as the main anchor for all styles.

We are going to use .post

Things to consider

• Will this be used in another website?
• How unique is this component type in the website?

HTML & SCSS

.post{
}

Internal Classes

We need to carefully think about our internal classes.

We want to leverage classes to prevent accidental conflicts.

.post{
    /*This may inherit other properties if there
    is another .title class somewhere */
    .title{
    }
}

Solution

.post{
    /*This rule will not inherit any rules from other SCSS */
    .post-title{
    }
    .post-body{
    }
    .post-author{
    }
}

Optimized

That's a lot of .posts

.post{
    .post-{
        &title{
        }
        &body{
        }
        &author{
        }
    }
}

.post .post-title{
}
.post .post-body{
}
.post .post-author{
}

Additional Things To Consider

• Nesting
• Enforcing Expectations

Nesting

You wont need to be as specific with our rules when you are nesting.

.post{
    .post-{
        &title{
        }
        &body{
        }
        &author{
            .post-author-image{
            }
        }
    }
}

.post{
    .post-{
        &title{
        }
        &body{
        }
        &author{
        }
        &author-image{
        }
     
    }
}

Enforcement

You may not always know what's going on with your global variables.

During development, your h3 bottom margin may go from 1.1 to 1.3.

You initially want 1.1 and don't declare it because the global style sheet declares it.

The change from 1.1 to 1.3 breaks your layout.

Solution

Be as specific as you can event when you don't think you need to.

Finally

Document everything.

Google Analytics

http://www.google.com/analytics/

Getting Setup

Setup

Tracking Code

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3685134-9"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXX-X');
</script>
    

Event Tracking

Event Tracking

Event Tracking Code

gtag('event', 'login');

gtag('event', 'event_name', {
    'event_category': categoryName,
    'event_label': labelName
});
////
gtag('event', 'login', {
    'event_category': 'access',
    'event_label': 'Google'
  });
        

Exercise for the night

• Try to get Exercise 28 running.