Reducing specificity problems in CSS using BEM and Custom Properties

github.com/geometricjim

Specificity in CSS is calculated for each property by the complexity of the selector which applied the property. Which if you think about it, is the opposite of what we want for our code - we want our code to be simple.

Screenshot of bootstrap custom properties

Using CSS Custom properties to reduce BEM specificity problems

Using css custom properties to reduce bem specificity problems

When to use a REM value and when to use a Pixel (PX) value in CSS.

Pixels vs Rems

Chrome appearance settings with font-size set to Medium

200px by 200px grey square with a 8px border radius

200px by 200px grey square with a 16px border radius

200px by 200px grey square with a 32px border radius

With accessibility taking more of a forefront than ever, it's not always obvious which units we should be using. However the answer isn't necessarily always elusive.

A left hand holding an extended tape measure which has been folded

When to use a REM and when to use a Pixel value in CSS

When to use a REM and when to use a pixel value in CSS

Forwarding Refs in React

streamich/react-use

Refs in React can be hard to work with, as people don't always understand what they're for, or how to make sure any components they built and using the correct API.

Rear shot of a baseball referee pointing to the left

Forwarding Refs in React components

A deepdive in implementing Angular's Control Value Accessor.

Building custom Reactive Form components

A deep dive into Angular template driven forms as we integrate with the Control Value Accessor

A screenshot of the Angular interface for ControlValueAccessor taken using Webstorm

Custom Angular form components using Control Value Accessor

Create custom Reactive Form components using Angular's Control Value Accessor

How to get a great looking gap-less layout using CSS Grid.

Masonry layouts using CSS Grid

Pinterest

CSS grid of two columns across three rows, containing square gradients

CSS grid of one column across three rows, containing square gradients

CSS grid containing three columns across two rows of square gradients

Layout of 6 gradient squares, the 2nd, 3rd and 6th span 2 columns each

CSS grid layout of gradient squares with the first and 4th cell spanning 2 rows

CSS grid showing 8 gradient cells, the third cell spans two columns and has been wrapped to the next line creating a gap

CSS grid with 8 cells, the fourth cell is spanning two columns

CSS Masonry grid containing multiple cells with a variety of gradient colours

CSS grid with 6 gradient cells, the first cell spans two rows, the fourth and fifth cells span two columns each

geometricpanda/blog-masonry-grid

Whilst CSS grid is still in it's relative infancy, and feature such as `grid-template-rows: masonry` are still waiting for cross browser support, we're able to create beautiful masonry-esque grid layouts which will make your most important content pop!

Rotated image of a grid containing 6 gradient filled squared

Cross Browser Masonry Layouts using CSS Grid

Cross Browser Masonry layouts using CSS Grid

In this article, we're going to look at how we can communicate with the Angular Express engine, allowing us to read and write HTTP headers on the server.

Serving headers and status codes in Angular Universal

geometricpanda/angular-universal

Angular Universal is great as it allows us to server side render Angular pages, however it's not well documented about how to serve routes which don't exist. In this article we discussing how to serve HTTP 404 status codes directly from Angular.

A screenshot of Google Chrome showing a 404 not found error

Blog Articles