用AI生成CSS @scope组件样式隔离代码的提示词示例
代码预览
提示词
Create an interactive demo showing CSS @scope for component style isolation. Build a UI with multiple card components that have conflicting class names but maintain independent styles through @scope. Include a toggle to show/hide scoped styles and demonstrate how @scope prevents style leakage.
CSS @scopeは、CSSルールが意図した範囲外に漏れ出さないようにスタイルの境界を作成できる強力な新機能です。これは、スタイルがアプリケーションの他の部分に誤って影響を与えないようにしたいコンポーネントベースのアーキテクチャに特に有用です。
このデモでは、両方が同じクラス名（.title、.content、.btn）を使用する2つのコンポーネント（コンポーネントAとコンポーネントB）があります。@scopeがなければ、これらは競合し、一貫性のないスタイリングが生じます。@scopeが有効になっていると、各コンポーネントは独自の分離されたスタイリングコンテキストを維持します。
@scopeルールは「ドーナツスコープ」を作成することで機能します – スタイルはスコープルート内に適用されますが、その外側の要素には影響しません。これにより、スコープ付きコンテキスト内でカスケードを維持しながら、従来のCSS手法よりも優れた制御を提供します。
@scopeのオン/オフを切り替えて、スタイルがどのように異なる動作をするかを確認してみてください。@scopeが無効になると、グローバルスタイルが適用されてスタイルが一貫性を失うことに気づくでしょう。@scopeが有効になると、同じクラス名を使用しているにもかかわらず、各コンポーネントは独自の視覚的アイデンティティを維持します。
この機能は、大規模なアプリケーション、デザインシステム、およびスタイルの競合が一般的なサードパーティコンポーネントを扱う場合に特に価値があります。
提示词解读
这个提示词专为前端开发者设计，用于生成一个展示 CSS @scope 规则如何实现组件样式隔离的交互式演示页面。生成结果通常包含多个使用相同类名的卡片组件，通过 @scope 语法让各自的样式互不干扰，直观呈现这一现代 CSS 特性的核心价值。页面还会内置一个切换按钮，可以动态开启或关闭作用域样式，让开发者清晰对比有无 @scope 保护时的样式污染情况。
这类提示词非常适合用于技术学习、团队内部分享或撰写技术博客时配套的示例代码。遇到大型项目中多个组件共用类名导致样式冲突的场景，这个演示能快速说明问题所在及解决思路。推荐在 Claude 或 ChatGPT 等支持代码生成的模型中使用，输出后可直接在浏览器中运行。若想进一步变通，可以在提示词中加入具体的组件类型（如表单、导航栏），或要求同时展示 @layer 规则，结合多种现代 CSS 特性进行综合演示，让输出内容更贴近实际项目需求。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選