@jjlmoya/utils-developer 1.4.0 → 1.5.0

package/src/tool/cssSpecificityCalculator/i18n/de.ts

@@ -0,0 +1,168 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssSpecificityCalculatorUI } from '../ui';
+
+const slug = 'css-spezifitaet-rechner';
+const title = 'CSS Spezifitätsrechner Online. Selektorgewicht Visualisierer';
+const description =
+  'Berechnen Sie die Spezifität und das genaue Gewicht jedes CSS-Selektors. Visuelles Tool, um zu verstehen, welche CSS-Regel in der Kaskade gewinnt, und um die Verwendung von !important zu vermeiden.';
+
+const faqData = [
+  {
+    question: 'Was ist CSS-Spezifität?',
+    answer:
+      'Spezifität ist der Algorithmus, den Browser verwenden, um zu entscheiden, welche CSS-Regel auf ein Element angewendet wird, wenn mehrere Regeln konkurrieren. Sie wird als dreispaltiger Wert (A, B, C) dargestellt, der IDs, Klassen/Attribute/Pseudoklassen bzw. Elemente/Pseudoelemente angibt.',
+  },
+  {
+    question: 'Kann eine Klasse jemals eine ID in der Spezifität schlagen?',
+    answer:
+      'Nicht direkt. Eine ID (1,0,0) schlägt immer eine beliebige Anzahl von Klassen (0,N,0), da es bei der Spezifität keinen Übertrag zwischen den Spalten gibt. Hundert Klassen (0,100,0) werden niemals eine einzige ID (1,0,0) schlagen.',
+  },
+  {
+    question: 'Was passiert, wenn zwei Selektoren die gleiche Spezifität haben?',
+    answer:
+      'Wenn zwei Selektoren genau das gleiche Gewicht haben, gewinnt derjenige, der zuletzt in der CSS-Datei deklariert wurde. Dies wird als natürliche Kaskadenreihenfolge bezeichnet. Dieser Rechner warnt Sie visuell, wenn ein Gleichstand auftritt.',
+  },
+  {
+    question: 'Warum gilt die Verwendung von !important als schlechte Praxis?',
+    answer:
+      'Die Anweisung !important bricht die natürliche CSS-Kaskade auf, indem sie eine Deklaration gegenüber jeder anderen Regel erzwingt. Dies führt zu Konflikten, die in großen Projekten schwer zu debuggen sind. Methodiken wie BEM plädieren dafür, die Spezifität flach zu halten, um !important niemals zu benötigen.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Geben Sie den ersten Selektor ein',
+    text: 'Geben Sie Selektor A in das linke Textfeld ein, zum Beispiel: #header .nav-item > a. Die Zähler für IDs, Klassen und Elemente werden sofort aktualisiert.',
+  },
+  {
+    name: 'Geben Sie den zweiten Selektor ein',
+    text: 'Geben Sie Selektor B in das rechte Textfeld ein, zum Beispiel: ul li.active a:hover. Beobachten Sie, wie sich die Gewichte in Echtzeit ändern.',
+  },
+  {
+    name: 'Lesen Sie das Ergebnis',
+    text: 'Der Rechner hebt den gewinnenden Selektorblock mit einem grünen Banner hervor. Wenn beide gleichauf liegen, erscheint eine Meldung, die die Kaskadenreihenfolge als Entscheidungsfaktor erklärt.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selektor A',
+  labelB: 'Selektor B',
+  placeholderA: 'z.B. #header .nav-item > a',
+  placeholderB: 'z.B. ul li.active a:hover',
+  cardIds: 'IDs',
+  cardClasses: 'Klassen / Pseudos',
+  cardElements: 'Elemente',
+  bannerWinner: 'Dieser Selektor gewinnt!',
+  msgTie: 'Beide Selektoren haben das gleiche Gewicht. Wenn sie um das gleiche Element konkurrieren, gewinnt derjenige, der <strong>zuletzt</strong> im CSS geschrieben wurde.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: CSS-Spezifität',
+      url: 'https://developer.mozilla.org/en/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selektoren Level 3 - Spezifität',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Was ist CSS-Spezifität?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die CSS-Spezifität ist der Algorithmus, nach dem Browser entscheiden, welche Eigenschaftswerte auf ein bestimmtes Element angewendet werden. Es ist im Grunde ein mathematischer Wert, der dem Browser sagt, „wie spezifisch“ eine Regel ist.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Wenn zwei Regeln unterschiedliche Spezifitätsstufen haben, gewinnt diejenige mit dem höheren Gewicht, unabhängig von der Reihenfolge, in der sie geschrieben wurden. Wenn beide das gleiche Gewicht haben, gewinnt die letzte im Quellcode deklarierte Regel.',
+    },
+    {
+      type: 'title',
+      text: 'So berechnen Sie die CSS-Spezifität',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Spezifität wird auf der Grundlage von drei Kategorien berechnet, die ein dreispaltiges Gewicht bilden, das oft als <strong>(A, B, C)</strong> ausgedrückt wird:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Spalte A (IDs):</strong> Zählt die Anzahl der eindeutigen Identifikatoren. Beispiel: <code>#header</code> zählt als 1 in Spalte A.',
+        '<strong>Spalte B (Klassen, Attribute und Pseudoklassen):</strong> Zählt alle Klassen (<code>.button</code>), Attribute (<code>[type="text"]</code>) und Pseudoklassen (<code>:hover</code>).',
+        '<strong>Spalte C (Elemente und Pseudoelemente):</strong> Zählt alle HTML-Elemente (<code>div</code>, <code>h1</code>) und Pseudoelemente (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Die goldene Regel: Kein numerischer Übertrag',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Eine Regel mit der Spezifität (0,50,0) wird <strong>niemals</strong> spezifischer sein als eine Regel (1,0,0). <strong>Eine einzige ID schlägt unendlich viele Klassen.</strong> Spalten laufen niemals ineinander über.',
+    },
+    {
+      type: 'title',
+      text: 'Das Problem mit !important und der BEM-Architektur',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Anweisung <code>!important</code> ist eine Ausnahme von den Spezifitätsregeln. Wenn sie verwendet wird, überschreibt diese Deklaration automatisch jede andere. Sie gilt als schlechte Praxis, da sie die natürliche Kaskade zerstört.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Um Spezifitätskriege in großen Projekten zu vermeiden, plädieren Methodiken wie <strong>BEM</strong> für die Verwendung von Selektoren mit nur einer Ebene von Klassen, wodurch die Spezifität künstlich flach bei (0,1,0) gehalten wird.',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/id.ts

@@ -0,0 +1,168 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssSpecificityCalculatorUI } from '../ui';
+
+const slug = 'kalkulator-spesifisitas-css';
+const title = 'Kalkulator Spesifisitas CSS Online. Visualisator Bobot Selektor';
+const description =
+  'Hitung spesifisitas dan bobot tepat dari selektor CSS apa pun. Alat visual untuk memahami aturan CSS mana yang menang dalam kaskade dan menghindari penggunaan !important.';
+
+const faqData = [
+  {
+    question: 'Apa itu spesifisitas CSS?',
+    answer:
+      'Spesifisitas adalah algoritma yang digunakan browser untuk memutuskan aturan CSS mana yang diterapkan pada suatu elemen ketika beberapa aturan bersaing. Ini direpresentasikan sebagai skor tiga kolom (A, B, C) yang masing-masing menunjukkan ID, kelas/atribut/kelas semu, dan elemen/elemen semu.',
+  },
+  {
+    question: 'Dapatkah sebuah kelas mengalahkan ID dalam spesifisitas?',
+    answer:
+      'Tidak secara langsung. Sebuah ID (1,0,0) selalu mengalahkan sejumlah kelas (0,N,0) karena spesifisitas tidak memiliki peralihan antar kolom. Seratus kelas (0,100,0) tidak akan pernah mengalahkan satu ID pun (1,0,0).',
+  },
+  {
+    question: 'Apa yang terjadi jika dua selektor memiliki spesifisitas yang sama?',
+    answer:
+      'Ketika dua selektor memiliki bobot yang persis sama, yang dinyatakan terakhir di file CSS yang menang. Ini dikenal sebagai urutan kaskade alami. Kalkulator ini secara visual memperingatkan Anda ketika terjadi seri.',
+  },
+  {
+    question: 'Mengapa menggunakan !important dianggap sebagai praktik buruk?',
+    answer:
+      'Arahan !important merusak kaskade CSS alami dengan memaksa deklarasi atas aturan lainnya. Ini menciptakan konflik yang sulit di-debug dalam proyek besar. Metodologi seperti BEM menyarankan agar spesifisitas tetap datar agar tidak memerlukan !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Masukkan selektor pertama',
+    text: 'Ketik Selektor A di kolom teks kiri, misalnya: #header .nav-item > a. Penghitung ID, Kelas, dan Elemen akan diperbarui secara instan.',
+  },
+  {
+    name: 'Masukkan selektor kedua',
+    text: 'Ketik Selektor B di kolom teks kanan, misalnya: ul li.active a:hover. Perhatikan bagaimana bobot berubah secara real-time.',
+  },
+  {
+    name: 'Baca hasilnya',
+    text: 'Kalkulator akan menyoroti blok selektor yang menang dengan spanduk hijau. Jika keduanya seri, pesan seri akan muncul menjelaskan urutan kaskade sebagai penentu kemenangan.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'id',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selektor A',
+  labelB: 'Selektor B',
+  placeholderA: 'misal: #header .nav-item > a',
+  placeholderB: 'misal: ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Kelas / Semu',
+  cardElements: 'Elemen',
+  bannerWinner: 'Selektor ini menang!',
+  msgTie: 'Kedua selektor memiliki bobot yang sama. Jika mereka bersaing untuk elemen yang sama, yang ditulis <strong>terakhir</strong> di CSS yang menang.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: CSS Specificity',
+      url: 'https://developer.mozilla.org/en/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Specificity',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Apa Itu Spesifisitas CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Spesifisitas CSS adalah algoritma yang digunakan browser untuk memutuskan nilai properti mana yang diterapkan pada elemen tertentu. Ini pada dasarnya adalah skor matematis yang memberi tahu browser "seberapa spesifik" suatu aturan.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Jika dua aturan memiliki tingkat spesifisitas yang berbeda, aturan dengan bobot lebih tinggi akan menang, terlepas dari urutan penulisannya. Jika keduanya memiliki bobot yang sama, aturan terakhir yang dinyatakan dalam kode sumber yang menang.',
+    },
+    {
+      type: 'title',
+      text: 'Cara Menghitung Spesifisitas CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Spesifisitas dihitung berdasarkan tiga kategori yang membentuk bobot tiga kolom, sering dinyatakan sebagai <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Kolom A (ID):</strong> Menghitung jumlah pengidentifikasi unik. Contoh: <code>#header</code> dihitung sebagai 1 di kolom A.',
+        '<strong>Kolom B (Kelas, Atribut, dan Kelas Semu):</strong> Menghitung semua kelas (<code>.button</code>), atribut (<code>[type="text"]</code>), dan kelas semu (<code>:hover</code>).',
+        '<strong>Kolom C (Elemen dan Elemen Semu):</strong> Menghitung semua elemen HTML (<code>div</code>, <code>h1</code>) dan elemen semu (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Aturan Emas: Tidak Ada Peralihan Numerik',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Aturan dengan spesifisitas (0,50,0) <strong>tidak akan pernah</strong> lebih spesifik daripada aturan (1,0,0). <strong>Satu ID mengalahkan kelas yang tak terhingga jumlahnya.</strong> Kolom tidak pernah melimpah satu sama lain.',
+    },
+    {
+      type: 'title',
+      text: 'Masalah dengan !important dan Arsitektur BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Arahan <code>!important</code> adalah pengecualian untuk aturan spesifisitas. Saat digunakan, deklarasi tersebut secara otomatis menimpa yang lain. Ini dianggap sebagai praktik buruk karena merusak kaskade alami.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Untuk menghindari perang spesifisitas dalam proyek besar, metodologi seperti <strong>BEM</strong> menyarankan penggunaan selektor kelas kedalaman tunggal saja, secara artifisial menjaga spesifisitas tetap datar di (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/it.ts

@@ -0,0 +1,168 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssSpecificityCalculatorUI } from '../ui';
+
+const slug = 'calcolatore-specificita-css';
+const title = 'Calcolatore di Specificità CSS Online. Visualizzatore di Peso del Selettore';
+const description =
+  'Calcola la specificità e il peso esatto di qualsiasi selettore CSS. Strumento visivo per capire quale regola CSS prevale nella cascata ed evitare di ricorrere a !important.';
+
+const faqData = [
+  {
+    question: 'Cos\'è la specificità CSS?',
+    answer:
+      'La specificità è l\'algoritmo che i browser usano per decidere quale regola CSS applicare a un elemento quando più regole sono in competizione. Viene rappresentata come un punteggio a tre colonne (A, B, C) che indica rispettivamente ID, classi/attributi/pseudo-classi ed elementi/pseudo-elementi.',
+  },
+  {
+    question: 'Una classe può mai battere un ID in specificità?',
+    answer:
+      'No, non direttamente. Un ID (1,0,0) batte sempre qualsiasi numero di classi (0,N,0) perché la specificità non ha riporto numerico tra le colonne. Cento classi (0,100,0) non supereranno mai un singolo ID (1,0,0).',
+  },
+  {
+    question: 'Cosa succede quando due selettori hanno la stessa specificità?',
+    answer:
+      'Quando due selettori hanno esattamente lo stesso peso, vince quello dichiarato per ultimo nel file CSS. Questo è noto come ordine naturale della cascata. Questo calcolatore ti avvisa visivamente quando si verifica un pareggio.',
+  },
+  {
+    question: 'Perché usare !important è considerato una cattiva pratica?',
+    answer:
+      'La direttiva !important interrompe la cascata CSS naturale forzando una dichiarazione su qualsiasi altra regola. Questo crea conflitti difficili da risolvere nei progetti grandi. Metodologie come BEM promuovono una specificità piatta per evitare di dover ricorrere a !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Inserisci il primo selettore',
+    text: 'Digita il Selettore A nel campo di testo a sinistra, ad esempio: #header .nav-item > a. I contatori di ID, Classi ed Elementi si aggiorneranno immediatamente.',
+  },
+  {
+    name: 'Inserisci il secondo selettore',
+    text: 'Digita il Selettore B nel campo di testo a destra, ad esempio: ul li.active a:hover. Osserva come cambiano i pesi in tempo reale.',
+  },
+  {
+    name: 'Leggi il risultato',
+    text: 'Il calcolatore evidenzierà con un banner verde il blocco del selettore vincente. Se entrambi pareggiano, apparirà un messaggio che spiega come l\'ordine della cascata funge da spareggio.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selettore A',
+  labelB: 'Selettore B',
+  placeholderA: 'es. #header .nav-item > a',
+  placeholderB: 'es. ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Classi / Pseudo',
+  cardElements: 'Elementi',
+  bannerWinner: 'Questo selettore vince!',
+  msgTie: 'Entrambi i selettori hanno lo stesso peso. Se competono per lo stesso elemento, vince quello scritto <strong>per ultimo</strong> nel CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Documentazione',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: Specificità CSS',
+      url: 'https://developer.mozilla.org/it/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Specificità',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Cos\'è la Specificità CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La specificità CSS è l\'algoritmo con cui i browser decidono quali valori di proprietà applicare a un determinato elemento. È essenzialmente un punteggio matematico che indica al browser "quanto specifica" sia una regola.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Se due regole hanno livelli di specificità diversi, vince quella con peso maggiore, indipendentemente dall\'ordine in cui sono state scritte. Se entrambe hanno lo stesso peso, vince l\'ultima dichiarata nel codice sorgente.',
+    },
+    {
+      type: 'title',
+      text: 'Come si calcola la specificità CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La specificità si calcola in base a tre categorie che formano un peso a tre colonne, spesso espresso come <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Colonna A (ID):</strong> Conta il numero di identificatori univoci. Esempio: <code>#header</code> vale 1 nella colonna A.',
+        '<strong>Colonna B (Classi, Attributi e Pseudo-classi):</strong> Conta tutte le classi (<code>.button</code>), gli attributi (<code>[type="text"]</code>) e le pseudo-classi (<code>:hover</code>).',
+        '<strong>Colonna C (Elementi e Pseudo-elementi):</strong> Conta tutti gli elementi HTML (<code>div</code>, <code>h1</code>) e i pseudo-elementi (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'La regola d\'oro: nessun riporto numerico',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Una regola con specificità (0,50,0) <strong>non sarà mai</strong> più specifica di una regola (1,0,0). <strong>Un singolo ID batte infinite classi.</strong> Le colonne non traboccano mai l\'una nell\'altra.',
+    },
+    {
+      type: 'title',
+      text: 'Il problema di !important e l\'architettura BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La direttiva <code>!important</code> è un\'eccezione alle regole di specificità. Quando viene usata, quella dichiarazione sovrascrive automaticamente qualsiasi altra. È considerata una cattiva pratica perché distrugge la cascata naturale.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Per evitare guerre di specificità nei progetti grandi, metodologie come <strong>BEM</strong> promuovono l\'uso esclusivo di selettori di classe a un solo livello di profondità, mantenendo artificialmente la specificità piatta a (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/ja.ts

@@ -0,0 +1,169 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssSpecificityCalculatorUI } from '../ui';
+
+const slug = 'css-specificity-calculator';
+const title = 'CSSセレクター詳細度チェッカー オンライン。セレクターの重みを可視化';
+const description =
+  'CSSセレクターの詳細度と正確な重みを計算します。どのCSSルールがカスケードで勝つかを視覚的に確認でき、!importantの乱用を防ぐのに役立つツールです。';
+
+const faqData = [
+  {
+    question: 'CSSの詳細度とは何ですか？',
+    answer:
+      '詳細度とは、複数のCSSルールが競合する際にブラウザがどのルールを適用するかを決定するアルゴリズムです。3列のスコア（A、B、C）で表され、それぞれIDの数、クラス・属性・擬似クラスの数、要素・擬似要素の数を示します。',
+  },
+  {
+    question: 'クラスセレクターはIDセレクターに勝てますか？',
+    answer:
+      '直接には勝てません。ID（1,0,0）はどれだけ多くのクラス（0,N,0）があっても必ず勝ちます。詳細度の列間には繰り上がりがないためです。100個のクラス（0,100,0）があっても、たった1つのID（1,0,0）には勝てません。',
+  },
+  {
+    question: '2つのセレクターの詳細度が同じ場合はどうなりますか？',
+    answer:
+      '2つのセレクターのスコアがまったく同じ場合、CSSファイルで後に書かれた方が優先されます。これが「カスケードの自然順序」です。このツールは同点になった場合に視覚的に通知します。',
+  },
+  {
+    question: 'なぜ !important を使うのは悪い習慣とされていますか？',
+    answer:
+      '!important を使うと、そのスタイル宣言が他のすべてのルールより強制的に優先されてしまい、CSSの自然なカスケードが崩れます。大規模なプロジェクトではデバッグが困難になる問題を引き起こします。BEMのような手法は、!importantを使わなくて済むよう詳細度をフラットに保つことを推奨しています。',
+  },
+];
+
+const howToData = [
+  {
+    name: '最初のセレクターを入力する',
+    text: '左側のテキストフィールドにセレクターAを入力してください。例：#header .nav-item > a。ID、クラス、要素のカウンターがリアルタイムで更新されます。',
+  },
+  {
+    name: '2番目のセレクターを入力する',
+    text: '右側のテキストフィールドにセレクターBを入力してください。例：ul li.active a:hover。重みがリアルタイムで変化するのを確認できます。',
+  },
+  {
+    name: '結果を確認する',
+    text: '勝ったセレクターのブロックが緑のバナーでハイライトされます。両方が引き分けの場合は、カスケード順序がタイブレーカーになる旨のメッセージが表示されます。',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ja',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'セレクター A',
+  labelB: 'セレクター B',
+  placeholderA: '例：#header .nav-item > a',
+  placeholderB: '例：ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'クラス / 擬似',
+  cardElements: '要素',
+  bannerWinner: 'このセレクターが勝ちです！',
+  msgTie: '両方のセレクターの重みが同じです。同じ要素に対して競合する場合、CSSで<strong>後に</strong>書かれた方が優先されます。',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'よくある質問',
+  faq: faqData,
+  bibliographyTitle: '参考資料とドキュメント',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: CSSの詳細度',
+      url: 'https://developer.mozilla.org/ja/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - 詳細度',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSSの詳細度とは？',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSSの詳細度とは、ブラウザが特定の要素にどのプロパティ値を適用するかを決定するアルゴリズムです。ルールが「どれだけ具体的か」をブラウザに伝える数値スコアと言えます。',
+    },
+    {
+      type: 'paragraph',
+      html: '2つのルールの詳細度が異なる場合、書かれた順序に関係なく、重みが大きい方が優先されます。同じ重みの場合は、ソースコードで後に宣言された方が優先されます。',
+    },
+    {
+      type: 'title',
+      text: 'CSSの詳細度の計算方法',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '詳細度は3つのカテゴリに基づいて計算され、<strong>(A, B, C)</strong> という3列の重みとして表されます：',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>列A（ID）：</strong>一意の識別子の数を数えます。例：<code>#header</code> は列Aで1としてカウントされます。',
+        '<strong>列B（クラス、属性、擬似クラス）：</strong>すべてのクラス（<code>.button</code>）、属性（<code>[type="text"]</code>）、擬似クラス（<code>:hover</code>）を数えます。',
+        '<strong>列C（要素、擬似要素）：</strong>すべてのHTML要素（<code>div</code>、<code>h1</code>）と擬似要素（<code>::before</code>）を数えます。',
+      ],
+    },
+    {
+      type: 'title',
+      text: '黄金律：列をまたいだ繰り上がりはない',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: '詳細度が (0,50,0) のルールは、(1,0,0) のルールより<strong>絶対に</strong>強くなりません。<strong>IDひとつがクラスをいくつ積み重ねても勝ちます。</strong>列間に繰り上がりは存在しません。',
+    },
+    {
+      type: 'title',
+      text: '!important の問題とBEMアーキテクチャ',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '<code>!important</code> は詳細度ルールの例外です。使用すると、その宣言が他のどんなルールよりも自動的に優先されます。自然なカスケードを壊すため、悪い習慣とされています。',
+    },
+    {
+      type: 'paragraph',
+      html: '大規模プロジェクトでの詳細度の衝突を避けるために、<strong>BEM</strong> のような手法では1段階のクラスセレクターのみを使うことを推奨し、詳細度を (0,1,0) のフラットな状態に保ちます。',
+    },
+  ],
+};
+