skills.rest
petenelson
petenelsonCOMMUNITY
Explore all skills by this author →
Website𝕏@CodeGeekATXGitHub

10up-css

Apply ITCSS-based CSS architecture to WordPress themes and plugins.

87|32|Updated Jul 3, 2015
Search Tags:#accessibility#css#naming-conventions#wordpress#css-architecture#itcss
One-click install
npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-css
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 10up-css
Source: https://github.com/petenelson/wp-rest-api-log/tree/main/.claude/skills/10up-css
Command: npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-css

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

CSS architecture and best-practice guidelines for WordPress projects, helping teams structure and scale styles with ITCSS, accessibility considerations, and naming conventions.

Core Features & Use Cases

  • ITCSS-based architecture guidance covering global, elements, components, and utilities layers
  • Accessibility and RTL-friendly CSS practices, naming conventions, and token usage
  • Real-world guidance for WordPress themes and plugins, including modern CSS techniques and scalable patterns

Quick Start

Apply ITCSS-based CSS architecture to a WordPress theme by organizing existing styles into global, elements, components, and utilities layers.

Frequently Asked Questions about 10up-css

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is ITCSS and how does it structure CSS for WordPress projects?▼

ITCSS is a CSS architecture methodology that organizes WordPress styles into layered tiers—global tokens, base elements, components, and utilities—to improve maintainability and scalability across themes and plugins.

How do I apply ITCSS architecture to an existing WordPress theme?▼

To apply ITCSS architecture to a WordPress theme, organize existing styles into global, elements, components, and utilities layers, ensuring structured taxonomy and reusable pattern library integration into current development workflows.

Does this CSS architecture guidance include accessibility and RTL-friendly practices?▼

Yes, the CSS architecture guidance includes accessibility considerations and RTL-friendly CSS practices, incorporating naming conventions and token usage to ensure scalable and accessible styling for WordPress projects.

Can I use ITCSS naming conventions for both WordPress themes and plugins?▼

Yes, ITCSS naming conventions apply to CSS authoring tasks across both WordPress themes and plugins, providing real-world guidance for modern CSS techniques and scalable pattern libraries within existing WordPress development workflows.

What's the best way to scale CSS in a WordPress project without creating specificity conflicts?▼

The best way to scale CSS in WordPress without specificity conflicts is using ITCSS architecture, which structures styles from global tokens down to utilities, managing specificity and ensuring maintainable component-based styling.

Related Skills

Explore More Software Engineering Skills→
michalstanieckomichalstaniecko

frontend-design

Standardize SCSS, Tailwind, and Bootstrap styling for WordPress themes.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Frontend Architecture

Develop a scalable WordPress theme frontend architecture with modular React components and design tokens.

Official
Advanced
ChwistopheChwistophe

rails-37-style-frontend-css

Implement native CSS architecture with cascade layers and OKLCH colors for Rails applications.

Community
Intermediate
botPhUbotPhU

css-styling-expert

Audit CSS architecture and produce a token-driven design system blueprint.

Community
Advanced