Styling Angular Applications – Vocabulary Flashcards

Vocabulary flashcards summarizing key terms from the lecture on styling Angular applications, covering tooling, concepts, and best practices.

Angular Component

A self-contained UI building block in Angular that includes template, logic, and optional styles.

View Encapsulation

Angular’s mechanism for scoping a component’s styles so they don’t leak out or get polluted by global styles.

Emulated CSS Selectors

The default Angular encapsulation setting that rewrites CSS selectors at build time to scope styles to a component.

Sass (Syntactically Awesome Style Sheets)

A CSS pre-processor that adds variables, nesting, mixins, and other features to write scalable, maintainable styles.

Component Theming

Technique of altering a component’s look and feel (colors, fonts, spacing) without changing its core logic.

Class-based Theme

A theming approach that applies a CSS class (e.g., .dark-theme) to change component styles globally or locally.

Context-based Theme

A theming method where the component adapts its styles based on the context or parent container’s classes.

CSS Custom Properties

Also known as CSS variables; reusable values (e.g., --primary-color) that enable dynamic theming at runtime.

Pre-bootstrap Loading Screen

A splash or spinner page displayed before Angular finishes bootstrapping to improve perceived performance.

Naming Conventions

Consistent rules (such as BEM) for class and file names that increase readability and maintainability of CSS.

Global Styles

Styles applied application-wide, typically defined in styles.scss, affecting all components unless overridden.

Node.js

JavaScript runtime used to execute build tools, Angular CLI commands, and run development servers.

Git

Version-control system used to track changes, manage branches, and switch between demo modules.

Demo Repository

The GitHub project (pluralsight-styling-angular-apps/demos-v3) containing code examples for each module.

Branch Naming (module-XX-YY)

A pattern indicating module number and clip number (e.g., module-03-01) for quickly checking out demo states.

npm install

Command that reads package.json and downloads all dependencies required to run the Angular demos.

npm start

Script that typically runs ng serve to compile the Angular project and launch a local development server.

Scalable CSS

Writing styles in a way that can grow with the application using modular components, variables, and clear structure.

Maintainable CSS

CSS architecture focused on ease of updates, minimal side effects, and predictable overrides using tools like Sass.

Code Organization

Structuring project files (components, styles, assets) logically to boost team productivity and reduce errors.