@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/cssSpecificityCalculator/i18n/ru.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-specifichnosti-css';
+const title = 'Калькулятор Специфичности CSS Онлайн. Визуализатор Веса Селектора';
+const description =
+  'Вычислите специфичность и точный вес любого CSS селектора. Визуальный инструмент для понимания того, какое правило CSS выигрывает каскад, и избегайте использования !important.';
+
+const faqData = [
+  {
+    question: 'Что такое специфичность CSS?',
+    answer:
+      'Специфичность — это алгоритм, который браузеры используют для определения того, какое правило CSS применяется к элементу, когда несколько правил конкурируют. Она представлена трёхколонным счётом (A, B, C), указывающим идентификаторы, классы/атрибуты/псевдо-классы и элементы/псевдо-элементы соответственно.',
+  },
+  {
+    question: 'Может ли класс когда-либо победить ID в специфичности?',
+    answer:
+      'Нет, прямо не может. ID (1,0,0) всегда побеждает любое количество классов (0,N,0), потому что специфичность не имеет переноса между колонками. Сто классов (0,100,0) никогда не победят один ID (1,0,0).',
+  },
+  {
+    question: 'Что происходит, когда два селектора имеют одинаковую специфичность?',
+    answer:
+      'Когда два селектора имеют одинаковый вес, побеждает тот, который объявлен последним в CSS файле. Это называется естественным порядком каскада. Этот калькулятор визуально предупреждает вас, когда происходит ничья.',
+  },
+  {
+    question: 'Почему использование !important считается плохой практикой?',
+    answer:
+      'Директива !important нарушает естественный CSS каскад, форсируя объявление над любым другим правилом. Это создаёт конфликты, которые трудно отследить в больших проектах. Методология BEM рекомендует сохранять специфичность плоской, чтобы никогда не требовалось !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Введите первый селектор',
+    text: 'Введите селектор A в левое текстовое поле, например: #header .nav-item > a. Счётчики ID, классов и элементов обновятся мгновенно.',
+  },
+  {
+    name: 'Введите второй селектор',
+    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: 'ru',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Селектор A',
+  labelB: 'Селектор B',
+  placeholderA: 'напр. #header .nav-item > a',
+  placeholderB: 'напр. ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Классы / Псевдо-классы',
+  cardElements: 'Элементы',
+  bannerWinner: 'Этот селектор выигрывает!',
+  msgTie: 'Оба селектора имеют одинаковый вес. Если они конкурируют за один элемент, побеждает селектор, написанный <strong>последним</strong> в CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто Задаваемые Вопросы',
+  faq: faqData,
+  bibliographyTitle: 'Ссылки и Документация',
+  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: 'Что такое специфичность CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Специфичность CSS — это алгоритм, по которому браузеры определяют, какие значения свойств применять к конкретному элементу. По сути это математический счёт, который говорит браузеру «насколько специфичным» является правило.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Если два правила имеют разные уровни специфичности, правило с большим весом побеждает, независимо от порядка их написания. Если оба имеют одинаковый вес, побеждает последнее объявленное в исходном коде.',
+    },
+    {
+      type: 'title',
+      text: 'Как вычислить специфичность CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Специфичность вычисляется на основе трёх категорий, образующих трёхколонный вес, часто выражаемый как <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Колонка A (ID):</strong> Подсчитывает количество уникальных идентификаторов. Пример: <code>#header</code> считается как 1 в колонке A.',
+        '<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) <strong>никогда</strong> не будет более специфичным, чем правило (1,0,0). <strong>Один ID побеждает бесчисленное количество классов.</strong> Колонки никогда не переполняются друг в друга.',
+    },
+    {
+      type: 'title',
+      text: 'Проблема с !important и архитектурой BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Директива <code>!important</code> является исключением из правил специфичности. При использовании это объявление автоматически переопределяет любое другое. Это считается плохой практикой, потому что разрушает естественный каскад.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Чтобы избежать войн специфичности в крупных проектах, методология <strong>BEM</strong> рекомендует использовать только селекторы классов с одинаковой глубиной, искусственно сохраняя специфичность плоской на уровне (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/sv.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-specificitetskalkulator';
+const title = 'CSS Specificitetskalkulator Online. Selectorviktvisualiserare';
+const description =
+  'Beräkna specificiteten och exaktvikten för alla CSS-selektorer. Visuellt verktyg för att förstå vilken CSS-regel som vinner kaskaden och undvika att använda !important.';
+
+const faqData = [
+  {
+    question: 'Vad är CSS-specificitet?',
+    answer:
+      'Specificitet är den algoritm som webbläsare använder för att bestämma vilken CSS-regel som gäller för ett element när flera regler konkurrerar. Den representeras som ett tresiffrigt värde (A, B, C) som indikerar ID:n, klasser/attribut/pseudoklasser och element/pseudoelement respektive.',
+  },
+  {
+    question: 'Kan en klass någonsin slå ett ID i specificitet?',
+    answer:
+      'Inte direkt. Ett ID (1,0,0) slår alltid ett vilket antal klasser som helst (0,N,0) eftersom specificitet inte har överföring mellan kolumner. Hundra klasser (0,100,0) kommer aldrig att slå ett enda ID (1,0,0).',
+  },
+  {
+    question: 'Vad händer när två selektorer har samma specificitet?',
+    answer:
+      'När två selektorer har exakt samma vikt vinner den som deklarerats sist i CSS-filen. Detta kallas naturlig kaskadordning. Denna kalkylator varnar visuellt dig när en oavgjord händelse inträffar.',
+  },
+  {
+    question: 'Varför anses det vara dålig praxis att använda !important?',
+    answer:
+      'Direktivet !important bryter den naturliga CSS-kaskaden genom att tvinga en deklaration över någon annan regel. Detta skapar konflikter som är svåra att felsöka i stora projekt. Metodologier som BEM förespråkar att hålla specificiteten platt för att undvika att någonsin behöva !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Ange den första väljaren',
+    text: 'Skriv väljare A i textfältet till vänster, till exempel: #header .nav-item > a. Räknarna för ID:n, klasser och element uppdateras omedelbar.',
+  },
+  {
+    name: 'Ange den andra väljaren',
+    text: 'Skriv väljare B i textfältet till höger, till exempel: ul li.active a:hover. Se hur vikterna ändras i realtid.',
+  },
+  {
+    name: 'Läs resultatet',
+    text: 'Kalkylatorn markerar vinnarblocken med en grön banderoll. Om både är oavgjort visas ett oavgjort meddelande som förklarar kaskadordningen som tiebreaker.',
+  },
+];
+
+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: 'sv',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Väljare A',
+  labelB: 'Väljare B',
+  placeholderA: 't.ex. #header .nav-item > a',
+  placeholderB: 't.ex. ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Klasser / Pseudoklasser',
+  cardElements: 'Element',
+  bannerWinner: 'Denna väljare vinner!',
+  msgTie: 'Båda väljarna har samma vikt. Om de konkurrerar om samma element vinner den som skrevs <strong>sist</strong> i CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga Frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och Dokumentation',
+  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: 'Vad är CSS-specificitet?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS-specificitet är den algoritm som webbläsare använder för att avgöra vilka egenskapsvärden som ska tillämpas på ett visst element. Det är i huvudsak ett matematiskt värde som berättar för webbläsaren "hur specifik" en regel är.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Om två regler har olika specificitetsnivåer vinner den med högre vikt, oavsett i vilken ordning de skrevs. Om båda har samma vikt vinner den som senast deklarerats i källkoden.',
+    },
+    {
+      type: 'title',
+      text: 'Hur man beräknar CSS-specificitet',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Specificitet beräknas baserat på tre kategorier som bildar en trestegs vikt, ofta uttryckt som <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Kolumn A (ID):</strong> Räknar antalet unika identifierare. Exempel: <code>#header</code> räknas som 1 i kolumn A.',
+        '<strong>Kolumn B (Klasser, attribut och pseudoklasser):</strong> Räknar alla klasser (<code>.button</code>), attribut (<code>[type="text"]</code>) och pseudoklasser (<code>:hover</code>).',
+        '<strong>Kolumn C (Element och pseudoelement):</strong> Räknar alla HTML-element (<code>div</code>, <code>h1</code>) och pseudoelement (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Gyllene regeln: Ingen överföring mellan kolumner',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'En regel med specificitet (0,50,0) kommer <strong>aldrig</strong> att vara mer specifik än en regel (1,0,0). <strong>Ett enda ID slår oändliga klasser.</strong> Kolumner flödar aldrig över i varandra.',
+    },
+    {
+      type: 'title',
+      text: 'Problemet med !important och BEM-arkitektur',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Direktivet <code>!important</code> är ett undantag från specificitetsreglerna. Vid användning åsidosätter den deklarationen automatiskt någon annan. Det anses vara dålig praxis eftersom det förstör den naturliga kaskaden.',
+    },
+    {
+      type: 'paragraph',
+      html: 'För att undvika specificitétskrig i stora projekt förespråkar metodologier som <strong>BEM</strong> användning av endast enkla klassväljare, vilket artificiellt håller specificiteten platt på (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/tr.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-ozgulesme-hesaplayici';
+const title = 'CSS Özgüleşme Hesaplayıcı Çevrimiçi. Seçici Ağırlık Görselleştiricisi';
+const description =
+  'Herhangi bir CSS seçicinin özgüleşmesini ve tam ağırlığını hesaplayın. Hangi CSS kuralının kaskada galip geldiğini anlamak için görsel araç ve !important kullanımından kaçının.';
+
+const faqData = [
+  {
+    question: 'CSS özgüleşmesi nedir?',
+    answer:
+      'Özgüleşme, tarayıcıların birden fazla kural yarıştığında hangi CSS kuralının bir öğeye uygulanacağını belirlemek için kullandığı algoritmadır. Sırasıyla ID\'leri, sınıfları/öznitelikleri/sözde sınıfları ve öğeleri/sözde öğeleri gösteren üç sütunlu bir skor (A, B, C) ile temsil edilir.',
+  },
+  {
+    question: 'Bir sınıf özgüleşmede hiçbir zaman bir ID\'yi yenebilir mi?',
+    answer:
+      'Doğrudan hayır. Bir ID (1,0,0) her zaman herhangi sayıda sınıfı (0,N,0) yener çünkü özgüleşmenin sütunlar arasında taşması yoktur. Yüz sınıf (0,100,0) hiçbir zaman tek bir ID (1,0,0) yenmeyecektir.',
+  },
+  {
+    question: 'İki seçicinin aynı özgüleşmesi varsa ne olur?',
+    answer:
+      'İki seçici tam olarak aynı ağırlığa sahip olduğunda, CSS dosyasında son olarak bildirilen seçici kazanır. Buna doğal kaskad sırası denir. Bu hesaplayıcı, bir beraberlik oluştuğunda sizi görsel olarak uyarır.',
+  },
+  {
+    question: 'Neden !important kullanmak kötü bir uygulama olarak kabul edilir?',
+    answer:
+      'İçin !important yönergesi, doğal CSS kaskadını kırar bir bildirim başka bir kuralın üzerinde zorlar. Bu, büyük projelerde takip etmesi zor olan çatışmalar oluşturur. BEM gibi metodolojiler, özgüleşmeyi düz tutmanın hiçbir zaman !important gerekmemesini savunur.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'İlk seçiciyi girin',
+    text: 'Sol metin alanına Seçici A yazın, örneğin: #header .nav-item > a. ID, Sınıf ve Element sayaçları anında güncellenecektir.',
+  },
+  {
+    name: 'İkinci seçiciyi girin',
+    text: 'Sağ metin alanına Seçici B yazın, örneğin: ul li.active a:hover. Ağırlıkların gerçek zamanlı olarak nasıl değiştiğini izleyin.',
+  },
+  {
+    name: 'Sonucu okuyun',
+    text: 'Hesaplayıcı kazanan seçici bloğunu yeşil bir başlıkla vurgulayacaktır. Her ikisi de bağlıysa, kaskad sırası tiebreaker olarak açıklayan bir bağlama mesajı görüntülenecektir.',
+  },
+];
+
+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: 'tr',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Seçici A',
+  labelB: 'Seçici B',
+  placeholderA: 'ör. #header .nav-item > a',
+  placeholderB: 'ör. ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Sınıflar / Sözde sınıflar',
+  cardElements: 'Öğeler',
+  bannerWinner: 'Bu seçici kazanır!',
+  msgTie: 'Her iki seçici de aynı ağırlığa sahiptir. Aynı öğe için rekabet ederlerse, CSS\'de <strong>son</strong> yazılan kazanır.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Sık Sorulan Sorular',
+  faq: faqData,
+  bibliographyTitle: 'Referanslar ve Belgeler',
+  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: 'CSS Özgüleşmesi Nedir?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS özgüleşmesi, tarayıcıların belirli bir öğeye hangi özellik değerlerinin uygulanacağına karar vermek için kullandığı algoritmadır. Esasen tarayıcıya bir kuralın ne kadar "spesifik" olduğunu söyleyen matematiksel bir puandır.',
+    },
+    {
+      type: 'paragraph',
+      html: 'İki kuralın farklı özgüleşme düzeyleri varsa, yazıldıkları sıra ne olursa olsun yüksek ağırlığa sahip olan kazanır. Her ikisi de aynı ağırlığa sahipse, kaynak kodda en son bildirilen kazanır.',
+    },
+    {
+      type: 'title',
+      text: 'CSS Özgüleşmesi Nasıl Hesaplanır',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Özgüleşme, genellikle <strong>(A, B, C)</strong> olarak ifade edilen üç sütunlu bir ağırlık oluşturan üç kategoriye dayalı olarak hesaplanır:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>A Sütunu (ID):</strong> Benzersiz tanımlayıcıların sayısını sayar. Örnek: <code>#header</code> A sütununda 1 olarak sayılır.',
+        '<strong>B Sütunu (Sınıflar, Öznitelikler ve Sözde sınıflar):</strong> Tüm sınıfları (<code>.button</code>), öznitelikleri (<code>[type="text"]</code>) ve sözde sınıfları (<code>:hover</code>) sayar.',
+        '<strong>C Sütunu (Öğeler ve Sözde öğeler):</strong> Tüm HTML öğelerini (<code>div</code>, <code>h1</code>) ve sözde öğeleri (<code>::before</code>) sayar.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Altın Kural: Sütunlar Arasında Taşma Yok',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Özgüleşmesi (0,50,0) olan bir kural <strong>asla</strong> bir kural (1,0,0) kadar spesifik <strong>olmayacak.</strong> <strong>Tek bir ID sonsuz sayıda sınıfı yener.</strong> Sütunlar hiçbir zaman birbirinin içine taşmaz.',
+    },
+    {
+      type: 'title',
+      text: 'BEM Mimarisi ile !important Sorunu',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '<code>!important</code> yönergesi özgüleşme kurallarının bir istisnasıdır. Kullanıldığında, bu bildirim otomatik olarak başka bir kuralı geçersiz kılar. Doğal kaskadı bozduğu için kötü bir uygulama olarak kabul edilir.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Büyük projelerde özgüleşme savaşlarından kaçınmak için <strong>BEM</strong> gibi metodolojiler, özgüleşmeyi yapay olarak (0,1,0) düzeyinde tutmak için yalnızca tek derinlik sınıf seçicileri kullanmayı savunur.',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/zh.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规则应用于元素的算法。它以三列分数(A、B、C)表示，分别表示ID、类/属性/伪类和元素/伪元素。',
+  },
+  {
+    question: '类能否在优先级中击败ID?',
+    answer:
+      '不能直接击败。ID(1,0,0)始终击败任何数量的类(0,N,0)，因为优先级在列之间没有进位。一百个类(0,100,0)永远不会击败单个ID(1,0,0)。',
+  },
+  {
+    question: '当两个选择器有相同的优先级时会发生什么?',
+    answer:
+      '当两个选择器具有完全相同的权重时，在CSS文件中最后声明的选择器获胜。这称为自然级联顺序。此计算器在出现平手时会以视觉方式警告您。',
+  },
+  {
+    question: '为什么使用!important被认为是不好的做法?',
+    answer:
+      '!important指令通过强制声明覆盖任何其他规则来破坏自然CSS级联。这在大型项目中创建了难以调试的冲突。BEM等方法倡议保持优先级平坦，以避免需要!important。',
+  },
+];
+
+const howToData = [
+  {
+    name: '输入第一个选择器',
+    text: '在左侧文本字段中输入选择器A，例如:#header .nav-item > a。ID、类和元素计数器将立即更新。',
+  },
+  {
+    name: '输入第二个选择器',
+    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: 'zh',
+};
+
+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 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: 'CSS优先级是什么?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS优先级是浏览器用来决定将哪些属性值应用于特定元素的算法。本质上，它是一个数学分数，告诉浏览器规则"有多具体"。',
+    },
+    {
+      type: 'paragraph',
+      html: '如果两个规则的优先级不同，无论书写顺序如何，权重较高的规则获胜。如果两者的权重相同，在源代码中最后声明的规则获胜。',
+    },
+    {
+      type: 'title',
+      text: '如何计算CSS优先级',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '优先级根据三个类别计算，形成三列权重，通常表示为<strong>(A、B、C)</strong>:',
+    },
+    {
+      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)的规则<strong>永远不会</strong>比优先级为(1,0,0)的规则更具体。<strong>单个ID击败无限个类。</strong>列永远不会相互溢出。',
+    },
+    {
+      type: 'title',
+      text: '!important和BEM架构的问题',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '<code>!important</code>指令是优先级规则的例外。使用时，该声明会自动覆盖任何其他规则。它被认为是不好的做法，因为它破坏了自然的级联。',
+    },
+    {
+      type: 'paragraph',
+      html: '为了避免大型项目中的优先级争议，<strong>BEM</strong>等方法倡议仅使用单深度类选择器，人为地将优先级保持在(0,1,0)平坦。',
+    },
+  ],
+};
+