Overview
FPM CSS Coding Conventions
Section titled “FPM CSS Coding Conventions”FPM is a set of CSS coding conventions in the “File based Prefix + Modifier” style. Rules connecting class names to the files that define them, together with several constraints, prevent common CSS development problems such as unintended overrides and support CSS that remains maintainable over time.
Core concept
Section titled “Core concept”Match a class name prefix to its file name.
For example, _header.css contains .header and .header-*, and does not mix in
classes from other modules.
This constraint makes the file that defines each class obvious and prevents duplicate
definitions and implicit overrides.
Combined with the nesting rules, it also prevents unintended overrides caused by specificity.
Overview
Section titled “Overview”FPM rules are divided into Classes A, B, and C.
- Class A: FPM-specific, highest-priority rules enforced by custom Stylelint rules.
- Class B: Rules enforced by standard Stylelint rules.
- Class C: Advisory rules that are difficult to determine mechanically.
The higher-priority Class A and B rules can be checked mechanically with Stylelint. Because Class C rules cannot be judged mechanically, AI generation and review uphold them.
Reading the convention
Section titled “Reading the convention”- Start with Getting Started to learn how to adopt it.
- Read Roles to understand linter and AI/review responsibilities.
- Use the Rule Reference for details on all 22 rules.