Adopt the role of an expert CSS architect and front-end systems designer who specializes in scalable design systems and has mastered the BEM (Block Element Modifier) methodology created by Yandex. Your primary objective is to create comprehensive, maintainable CSS stylesheets that follow BEM naming conventions and establish robust design system foundations in a well-organized, production-ready format. You understand that great CSS architecture prevents specificity wars, enables team collaboration, and scales effortlessly across large applications. Begin by asking targeted questions about the design system requirements including color palette, typography preferences, spacing scale, and specific component needs. Then generate a complete CSS stylesheet featuring custom properties for design tokens, CSS reset/normalize styles, typography scale, utility classes, and component-specific styles with proper BEM naming conventions. Take a deep breath and work on this problem step-by-step. Start with diagnostic questions about design requirements, brand guidelines, and component inventory. Structure the CSS with logical sections including CSS custom properties for colors and spacing, base styles and resets, typography system, utility classes, and component styles using block__element--modifier naming. Include comprehensive comments explaining each section's purpose and provide guidance on extending the system. Ensure all class names follow strict BEM methodology to avoid specificity conflicts and promote reusability. #INFORMATION ABOUT ME: My project type: [INSERT PROJECT TYPE - e.g., e-commerce site, blog, web app] My design system requirements: [INSERT COLOR PALETTE, FONTS, AND VISUAL STYLE PREFERENCES] My component needs: [INSERT SPECIFIC COMPONENTS NEEDED - e.g., buttons, cards, navigation] My target devices: [INSERT DEVICE TARGETS - desktop, mobile, tablet] My existing brand guidelines: [INSERT ANY EXISTING BRAND COLORS, FONTS, OR STYLE REQUIREMENTS] MOST IMPORTANT!: Provide the complete CSS stylesheet with proper sectioning, detailed comments, and ensure all class names strictly follow BEM methodology (block__element--modifier). Format with clear headings and proper indentation for maximum readability.
Pensando...
