FNB App Academy Notes 22 May 2025

✅ Today’s Way Forward: Enterprise CSS & Scalable Architecture @ FNB

1. Adopt the Enterprise CSS Mindset

• Stop thinking in “stylesheets.” Start thinking in system contracts.

• CSS is now part of your product’s compliance, accessibility, and performance strategy.

• Treat every style decision as engineered and testable.

2. Design Systems Are Your Source of Truth

• Use design tokens as the only source for colors, fonts, spacing, etc.

• Serve tokens across platforms via tools like Style Dictionary or Tokens Studio.

• Validate token usage in CI — ensure design/code alignment is enforced.

3. Component-Level Styling with CSS-in-JS

• Encapsulate styles within components to reduce global CSS pollution.

• Use styled-components, emotion, or similar libraries for React/Angular projects.

• Apply dynamic theming through React contexts or attribute selectors ([data-theme]).

4. Enforce Process-Driven Workflow

• Apply Git discipline with clear branch naming conventions.

• Automate:

  • CSS linting (Stylelint)

  • Visual regression tests (Chromatic, Percy)

  • Figma match-checks (@design-reviewed PR tags)

5. Full QA Pipeline from Figma to Prod

• QA isn’t just code review — cover:

  • Figma QA

  • Responsive testing across breakpoints

  • a11y audits using tools like Lighthouse, axe, Tota11y

  • Visual regression snapshots in CI

6. Build for Scalability

• Enforce:

  • Style audits (dead CSS removal)

  • Token usage reports

  • Bundle size budgeting (<100KB uncompressed CSS)

• Use PostCSS, PurgeCSS, and Source Map Explorer to control output and weight.

7. Implement Flexible Theming Architecture

• Use attribute-based theming: data-brand, data-theme, etc.

• Support white-labeling with scoped token definitions per brand/client.

• Dynamically switch themes at runtime using JS.

8. Enterprise-Grade Dark Mode

• Respect system preferences (prefers-color-scheme)

• Allow user overrides via JavaScript

• Ensure WCAG AA/AAA contrast compliance

9. Secure Your Styling

• Avoid leaking sensitive user data in class names or inline styles.

• Sanitize all dynamic classes, especially those generated from user data.

• Treat styling as part of secure frontend architecture.

10. Optimize Performance

• Lazy-load CSS for non-critical paths.

• Use dynamic imports to reduce blocking.

• Inline only above-the-fold critical styles.

• Preload main stylesheets and reduce unused styles via tree-shaking.

11. Make Components Accessible

• Think inclusivity: keyboard nav, screen reader labels, focus indicators.

• Test across age, ability, and device ranges.

• Use semantic HTML and proper ARIA roles.

12. Promote Visual Engineering Culture

• Pair PRs with design reviews.

• Maintain a living Storybook as a source of UI truth.

• Hold biweekly visual retros and log decisions in Notion or Confluence.

Action Plan

• ✅ Build and submit a component to the shared FNB design system.

• ✅ Run a style audit on your most recent module.

• ✅ Create a dark/light theme toggle using localStorage and design tokens.

• ✅ Improve your team’s CI pipeline to include:

  • Stylelint

  • Percy or Chromatic

  • Source Map Explorer

• ✅ Write or update documentation for the component/layout you maintain.

Final Note

CSS is no longer just a styling layer. It’s a product contract — enforcing trust, branding, accessibility, and compliance. In a high-stakes environment like FNB:

• Every pixel must be intentional

• Every style must be validated

• Every component must be inclusive