Styling Angular Applications

Course Overview
Hi everyone, my name is Brian Treese, and welcome to my course: Styling Angular Applications. I'm the chief designer at SoCreate. When it comes to CSS in Angular, nothing is what it seems, it's a completely new modular approach to front-end web development, and it forces us to transform the way that we apply styles within our applications. In this course, we're going to dig into how styles work in Angular, we're going to build systems to provide structure and organization and to help maintain our styles over time, and we're going to explore various methods for creating themeable components. By the end of this course, we'll have a strong knowledge of how Angular processes CSS, and the many different ways it can be leveraged as part of an overall design system for creating beautiful, organized, maintainable, and future-proof web applications. Before beginning this course, you should be familiar with HTML, CSS, CSS pre-processors, like SASS, and you should have a general familiarity with Angular and TypeScript. I hope you'll join me on this journey to learn all about CSS in Angular, with the Styling Angular Applications course, at Pluralsight.

Scalable, Maintainable CSS/SCSS Architecture in Angular
When creating Angular applications, we must rethink the way we do pretty much everything, and CSS is no exception. The true power that this framework provides for us is the ability to think about things at a much small scale. Everything is isolated and the old pains of style bleed, conflict, overriding, you name it, they're all, for the most part, gone. Angular is, however, an unopinionated framework, meaning that there are a million different ways that we can architect our CSS, and this means, just like everything else, with great power comes great responsibility. In this module, we'll cover some methods to help get us set up for success in writing clean, organized, well-structured, and scalable CSS within this new world. Most front-end web developers will preach the benefits of using a preprocessor like Sass, Less, or Stylus to aid in our workflows. Well I'm no different. I believe there's such a benefit to be had here, that we should not pass it up. So the code examples we'll see throughout the rest of this section we'll use Sass, but though easily work with other preprocessors as well, and if you're one that doesn't believe in preprocessors, well that's okay, much of what we'll cover here will still benefit you as well. The over arcing subjects that we'll explore in this module are methods for handing global styles in a modular componentized Shadow DOM'd realm, naming conventions, relative units and predictability, selectors and style overrides, code, file, and directory structure and organization, and mixins and variables. So let's jump on in and look at the some of the ways that we can handle global styles within our applications.

Creating Component Themes
So far we've focused on how Angular processes and applies styles to its components, and we've looked at approaches to apply systems and conventions for organization and maintainability as apps scale, but we haven't yet addressed how we can provide different looks to Angular components that are built to, pretty much, end up anywhere within the application. When we build components that are more global in nature, components like our tabs for example, they're intended to be used all throughout our app in many different contexts. We could use the tabs here, and, oh wait, it won't really work here in our modal in its default theme, it just doesn't look right since our modal's a completely different color. What I found so far in my experience of working with Angular is that many components have the need to vary their layouts and their colors. So how do we handle these scenarios? Well that's what we're going to cover in this module. We'll look at methods to provide themes to components with classes in the host sudo class selector. We'll look at applying different styling to components based on where they find themselves using the host-context sudo class selector. We'll look at ways to conditionally render parts of a component based on the given theme or context. And lastly, we'll explore the future of component theming by opening up our components for extension using CSS custom properties to provide styling hooks that can then be passed down from parent components.