Scribd Logo
Upload

Welcome to Scribd!

  • Css Selector Best Practices

    Uploaded by

    Hruday charan
    125 views6 pages
    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.

    Original Description:

    Css Selector Best Practices

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    125 views6 pages

    Css Selector Best Practices

    Uploaded by

    Hruday charan
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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