Scribd
Upload
230 views

Css Selector Best Practices

George Moller discusses best practices for CSS selectors, including defining selector intent, making selectors reusable, making them location independent rather than dependent on location in the HTML, and keeping selectors short for better performance by avoiding high specificity. Key points are to make selectors explicit and well-reasoned based on intent, lend themselves to reuse, style elements based on what they are rather than where they are located, and keep selectors short.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
230 views

Css Selector Best Practices

George Moller discusses best practices for CSS selectors, including defining selector intent, making selectors reusable, making them location independent rather than dependent on location in the HTML, and keeping selectors short for better performance by avoiding high specificity. Key points are to make selectors explicit and well-reasoned based on intent, lend themselves to reuse, style elements based on what they are rather than where they are located, and keep selectors short.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

George Moller

_georgemoller

C S S

S E L E C TO R S

B E S T

PRACTICES
01
George Moller
_georgemoller

Selector Intent
Selector Intent is the process of deciding and defining what
you want to style and how you will go about selecting it.
e.g. If we want to select the main navigation menu:

This selector’s intent is to style any ul inside any


header element, whereas our intent was to style the
site’s main navigation.
01
George Moller
_georgemoller

Selector Intent

“your selectors should be as explicit and well reasoned


as your reason for wanting to select something.”
Harry Roberts

More info on https://cssguidelin.es/#css-selectors


02
George Moller
_georgemoller

Reusability
Everything you choose, from the type of selector to its name,
should lend itself toward being reused.
03
George Moller
_georgemoller

Location Independence
Don’t style things based on where they are, but on what they
are.

e.g. We want to style a promotion call-to-action button:

Locationally dependent: we can’t reuse that button


with its correct styling outside of .promo
04
George Moller
_georgemoller

PErformance
Keep selectors as short as possible, this will keep
specificity down and performance up.

e.g. We want to style a navigation menu link:

You might also like