 Resources from Garth Braithwaite in 2024

Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. 

In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

Cascading Style Sheets bring order and beauty to our applications.

CSS Selectors in Depth

Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course demonstrates the process of styling an application from start to finish.

We will take a basic un-styled todo-list application written in React and use CSS to get the application to look like how we want. The first steps will be to apply static styles to the app based on a mock up, then we will incrementally add user interactivity as well as make the app responsive.

Style an Application from Start to Finish

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Flexbox Fundamentals

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention. [OOCSS](https://github.com/stubbornella/oocss) and [SMACSS](https://smacss.com/) offer similar methodologies. I also use the class attribute selector to [target multiple modifier classes](https://www.viget.com/articles/bem-multiple-modifiers-and-experimenting-with-attribute-selectors). 

Reduce Ambiguity in Class Names using a Naming Convention

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention for CSS class names.

Understand Semantic Markup in relation to CSS

Demystifying alignment in flexbox children

There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.

Use CSS to Inform Users of Interactivity

Using pseudo-elements like `::before` and  `::after` we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

Draw Simple Icons with CSS

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

Use Media Queries to Make an Existing Application Responsive

Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.

Inform the User of Interactions with CSS Transitions

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Defining dimensions on flexbox children using flex-basis

Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

Form Pseudo Classes :focus :disabled :checked :invalid :required

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

Using flex-shrink and flex-grow to make flexbox children resize correctly

Using the `order` property we alter the order in which flexbox children appear on the page, without making changes to the dom.

Using order to rearrange flexbox children

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

Combining the flexbox sizing properties using the flex shorthand

In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the `html` and `body` elements that sets the foundation for the rest of the application styles.

Prep HTML for Styling with Flat Class Names

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

Keep Styles Portable and Maintainable with Basic Classes

The Flexbox css spec allows for more adjustable layouts. The `flex-direction` property allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries.

Using flex-direction to layout content horizontally and vertically

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.

Basic CSS Selectors

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

Topics

Instructors

Content Type

Garth Braithwaite