In CSS, scope refers to the range where styles take effect. In other words, it’s the concept that determines which elements your CSS rules are applied to.
What is CSS scope?
Looking at the origin of the word “scope,”
In ancient times, it referred to the target point aimed at when shooting an arrow or the range that could be seen with the eyes. Later, in modern English, its meaning expanded to include range, sphere of influence, and area of application.
This meaning carries over into CSS and programming as well. In programming, scope refers to the range where code has an effect, where variables are visible, and where styles are applied.
Therefore, if you understand the original meaning of the word “scope” as “the visible range” or “the range of influence,” it becomes much easier to understand the concept of scope in CSS and programming.
CSS scope is global by default
CSS uses a global scope by default. If you write it like in the example above, all the tags on the page will turn red. This is because CSS basically works by applying styles to every element in the document that matches the selector.
Scope: the range where styles are applied.
Inside the card
Outside the card
This means the pink color is applied only to the <p> elements inside '.card'.
In other words, the scope is limited to the inside of '.card'.
How to create scope
Example 1. Only a specific area
All button elements inside the `.sidebar` class get a pink background.
Example 2. Only a specific component
In HTML, only the element with `class="profile-card"` gets rounded corners with a 20px radius.
In CSS, scope refers to the range where styles are applied, and this range is created through selectors.
Why CSS scope is important
Because CSS is applied globally by default, unexpected problems can easily occur if scope isn’t managed properly.
Since selectors operate across the entire document, unintended UI colors or styles may change together, and different styles can conflict with one another.
If this situation repeats, fixing one element can start affecting others, making maintenance very difficult. Therefore, when writing CSS, it’s important to clearly define where styles should apply and develop the habit of managing scope through classes and structure.
If written this way, all the buttons on the entire site will turn red.
This way, the scope is defined at the component level.
*Component: an independently separated, reusable piece of UI