IDEA9103 Chap.3 CSS Selectors and Code Clarity
CSS Selectors and Code Clarity
Selectors define the audience for a visual rule. Element selectors are broad, classes group repeated roles and ids identify unique nodes. This chapter connects selector reach with readable names, camelCase and purposeful comments. The aim is code that communicates a design system to another reader instead of merely producing the right colour in one current screenshot.
What this chapter covers
- 01
Element Selector Reach
- 02
Reusable Classes
- 03
Unique Ids
- 04
Separate Stylesheets
- 05
CamelCase Naming
- 06
Purposeful Comments
Worked example · free
Refactor an opaque annotation rule
- 1Name the class for its role, such as annotation.
- 1Name the value annotationGap.
- 1Keep presentation rules in the stylesheet.
- 1Comment the reason for the gap only if it is not obvious.
Key terms
- Element selector
- A CSS selector that targets every matching tag name.
- Class selector
- A reusable selector that targets elements sharing a class attribute.
- Id selector
- A selector for the one element carrying a unique id value.
- camelCase
- A naming convention with a lowercase first word and capitalised later words.
- Code comment
- Non-executable text that records purpose, constraint, provenance or another useful explanation.
CSS Selectors and Code Clarity FAQ
When should I use a class instead of an id?
Use a class for a reusable role shared by several elements. Use an id for one unique node that styling or JavaScript must address individually, such as a single SVG stage.
What makes a useful code comment?
A useful comment records why a decision exists, which constraint it protects or where external material came from. A comment that simply repeats the assignment below it adds little information.
Why keep CSS in a separate file?
A separate stylesheet centralises presentation rules, keeps the HTML structure readable and lets one selector update every member of a role. It also makes style membership easier to inspect during debugging.
How do I choose selector reach?
Describe the intended audience before writing syntax. Use an element selector when every tag of that kind shares the rule, a class when a meaningful subgroup shares it, and an id when one unique node requires an anchor. Verify one intended member and one nearby non-member so the boundary is proven.
Why are role based names more durable?
A name such as annotation explains why elements belong together, while blueText only describes their current appearance. If the palette changes, the role remains accurate and the presentation can change in one rule. Durable vocabulary also helps JavaScript and HTML refer to the same design concept without stale visual labels.
What should I inspect when a CSS rule loses?
First confirm the intended selector actually matches the element. Then inspect the computed style to identify the declaration that wins and where it came from. This separates a membership problem from a cascade problem and avoids adding an id or inline style merely to overpower a rule you have not understood.
How should I refactor repeated inline styles?
Decide whether the elements share a role rather than only a current value. Add a semantic class, confirm the output remains unchanged, remove the duplicated declarations and check that a non-member stays untouched. Search HTML, CSS and JavaScript for any old token so a selector rename does not break behaviour elsewhere.
How can selector scope prevent an unintended redesign?
Begin with the smallest group that actually shares the visual role. Apply the proposed selector and compare one intended member with one nearby non-member. If both change, the selector expresses a structural relationship that is too broad. Refine it through a class or a more specific context, then search the project for every matching token before renaming anything. Record which rule wins when declarations compete.
This audit connects the cascade to design intent and prevents a convenient selector from becoming a hidden dependency across unrelated parts of the page.
Assessment move
For every selector, write its intended audience in plain language and identify one nearby element that should remain unchanged. Audit names after each visual redesign so stale colour or shape terms do not mislead. Rewrite comments that narrate syntax into notes about design purpose, constraints or attribution. Use browser inspection to verify matched rules before adding stronger selectors.
Working through CSS Selectors and Code Clarity in IDEA9103? Sia is AskSia’s AI Computer Science tutor — ask any IDEA9103 CSS Selectors and Code Clarity question and get a clear, step-by-step explanation grounded in how IDEA9103 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.