@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/cssSpecificityCalculator/i18n/ko.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 우선순위(specificity)는 여러 규칙이 경쟁할 때 브라우저가 어떤 CSS 규칙을 요소에 적용할지 결정하는 알고리즘입니다. 세 열의 점수(A, B, C)로 표현되며 각각 ID, 클래스·속성·가상 클래스, 요소·가상 요소의 수를 나타냅니다.',
+  },
+  {
+    question: '클래스가 ID보다 우선순위가 높아질 수 있나요?',
+    answer:
+      '직접적으로는 불가능합니다. ID(1,0,0)는 클래스(0,N,0)가 아무리 많아도 항상 이깁니다. 우선순위 열 사이에는 자리 올림이 없기 때문입니다. 클래스 100개(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: 'ko',
+};
+
+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/ko/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: '두 규칙의 우선순위가 다르면, 작성 순서와 관계없이 가중치가 높은 쪽이 이깁니다. 가중치가 같으면 소스 코드에서 나중에 선언된 것이 적용됩니다.',
+    },
+    {
+      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)인 규칙은 (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>과 같은 방법론은 단일 깊이의 클래스 선택자만 사용하여 우선순위를 (0,1,0)으로 평평하게 유지하는 것을 권장합니다.',
+    },
+  ],
+};
+

package/src/tool/cssSpecificityCalculator/i18n/nl.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-specificiteit-calculator';
+const title = 'CSS Specificiteitsrekenmachine Online. Selectorgewicht Visualiseren';
+const description =
+  'Bereken de specificiteit en het exacte gewicht van elk CSS-selector. Een visuele tool om te begrijpen welke CSS-regel de cascade wint en het gebruik van !important te vermijden.';
+
+const faqData = [
+  {
+    question: 'Wat is CSS-specificiteit?',
+    answer:
+      'Specificiteit is het algoritme dat browsers gebruiken om te beslissen welke CSS-regel op een element wordt toegepast wanneer meerdere regels concurreren. Het wordt weergegeven als een driekolomsscore (A, B, C) die respectievelijk ID\'s, klassen/attributen/pseudo-klassen en elementen/pseudo-elementen aangeeft.',
+  },
+  {
+    question: 'Kan een klasse ooit een ID verslaan in specificiteit?',
+    answer:
+      'Niet direct. Een ID (1,0,0) verslaat altijd elk aantal klassen (0,N,0) omdat specificiteit geen doorloop heeft tussen kolommen. Honderd klassen (0,100,0) zullen nooit één enkel ID (1,0,0) verslaan.',
+  },
+  {
+    question: 'Wat gebeurt er als twee selectors dezelfde specificiteit hebben?',
+    answer:
+      'Wanneer twee selectors exact hetzelfde gewicht hebben, wint degene die het laatst in het CSS-bestand is gedeclareerd. Dit staat bekend als de natuurlijke cascadevolgorde. Deze rekenmachine waarschuwt je visueel wanneer er een gelijkspel optreedt.',
+  },
+  {
+    question: 'Waarom wordt het gebruik van !important als slechte praktijk beschouwd?',
+    answer:
+      'De !important-richtlijn doorbreekt de natuurlijke CSS-cascade door een declaratie te forceren boven elke andere regel. Dit leidt tot conflicten die moeilijk te debuggen zijn in grote projecten. Methodologieën zoals BEM pleiten voor het vlak houden van specificiteit om !important nooit nodig te hebben.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Voer de eerste selector in',
+    text: 'Typ selector A in het linker tekstveld, bijvoorbeeld: #header .nav-item > a. De tellers voor ID\'s, Klassen en Elementen worden direct bijgewerkt.',
+  },
+  {
+    name: 'Voer de tweede selector in',
+    text: 'Typ selector B in het rechter tekstveld, bijvoorbeeld: ul li.active a:hover. Bekijk hoe de gewichten in realtime veranderen.',
+  },
+  {
+    name: 'Lees het resultaat',
+    text: 'De rekenmachine markeert het winnende selectorblok met een groen banner. Als beide gelijkspelen, verschijnt er een bericht dat de cascadevolgorde als beslisser uitlegt.',
+  },
+];
+
+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: 'nl',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selector A',
+  labelB: 'Selector B',
+  placeholderA: 'bijv. #header .nav-item > a',
+  placeholderB: 'bijv. ul li.active a:hover',
+  cardIds: 'ID\'s',
+  cardClasses: 'Klassen / Pseudo\'s',
+  cardElements: 'Elementen',
+  bannerWinner: 'Deze selector wint!',
+  msgTie: 'Beide selectors hebben hetzelfde gewicht. Als ze concurreren voor hetzelfde element, wint degene die <strong>als laatste</strong> in de CSS staat.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde Vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties en Documentatie',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: CSS-specificiteit',
+      url: 'https://developer.mozilla.org/nl/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Specificiteit',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Wat is CSS-specificiteit?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS-specificiteit is het algoritme waarmee browsers bepalen welke eigenschapswaarden op een bepaald element worden toegepast. Het is in feite een wiskundig getal dat de browser vertelt hoe "specifiek" een regel is.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Als twee regels verschillende specificiteitsniveaus hebben, wint degene met het hoogste gewicht, ongeacht de volgorde waarin ze zijn geschreven. Als beide hetzelfde gewicht hebben, wint de laatste die in de broncode is gedeclareerd.',
+    },
+    {
+      type: 'title',
+      text: 'CSS-specificiteit berekenen',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Specificiteit wordt berekend op basis van drie categorieën die samen een driekolomsgewicht vormen, vaak uitgedrukt als <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Kolom A (ID\'s):</strong> Telt het aantal unieke identificatoren. Voorbeeld: <code>#header</code> telt als 1 in kolom A.',
+        '<strong>Kolom B (Klassen, Attributen en Pseudo-klassen):</strong> Telt alle klassen (<code>.button</code>), attributen (<code>[type="text"]</code>) en pseudo-klassen (<code>:hover</code>).',
+        '<strong>Kolom C (Elementen en Pseudo-elementen):</strong> Telt alle HTML-elementen (<code>div</code>, <code>h1</code>) en pseudo-elementen (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'De gouden regel: geen numerieke doorloop',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Een regel met specificiteit (0,50,0) zal <strong>nooit</strong> specifieker zijn dan een regel (1,0,0). <strong>Één enkel ID verslaat oneindig veel klassen.</strong> Kolommen lopen nooit in elkaar over.',
+    },
+    {
+      type: 'title',
+      text: 'Het probleem met !important en BEM-architectuur',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'De <code>!important</code>-richtlijn is een uitzondering op de specificiteitsregels. Wanneer gebruikt, overschrijft die declaratie automatisch alles. Het wordt als slechte praktijk beschouwd omdat het de natuurlijke cascade vernietigt.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Om specificiteitsoorlogen in grote projecten te vermijden, pleiten methodologieën zoals <strong>BEM</strong> voor het gebruik van uitsluitend één niveau van klasse-selectors, waardoor de specificiteit kunstmatig vlak op (0,1,0) wordt gehouden.',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/pl.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-specyficznosci-css';
+const title = 'Kalkulator Specyficzności CSS Online. Wizualizator Wagi Selektora';
+const description =
+  'Oblicz specyficzność i dokładną wagę dowolnego selektora CSS. Narzędzie wizualne, które pomoże zrozumieć, która reguła CSS wygrywa kaskadę i uniknąć używania !important.';
+
+const faqData = [
+  {
+    question: 'Czym jest specyficzność CSS?',
+    answer:
+      'Specyficzność to algorytm, którego przeglądarki używają do rozstrzygania, która reguła CSS zostanie zastosowana do elementu, gdy rywalizuje kilka reguł naraz. Wyrażana jest jako trzycyfrowy wynik (A, B, C) oznaczający odpowiednio: identyfikatory, klasy/atrybuty/pseudoklasy oraz elementy/pseudoelementy.',
+  },
+  {
+    question: 'Czy klasa może kiedykolwiek pokonać ID pod względem specyficzności?',
+    answer:
+      'Nie, bezpośrednio nie. ID (1,0,0) zawsze bije dowolną liczbę klas (0,N,0), bo specyficzność nie przenosi wartości między kolumnami. Sto klas (0,100,0) nigdy nie pokona jednego ID (1,0,0).',
+  },
+  {
+    question: 'Co się dzieje, gdy dwa selektory mają tę samą specyficzność?',
+    answer:
+      'Gdy dwa selektory mają dokładnie tę samą wagę, wygrywa ten zadeklarowany później w pliku CSS. Nazywa się to naturalnym porządkiem kaskady. Kalkulator wyświetli wizualne ostrzeżenie, gdy dojdzie do remisu.',
+  },
+  {
+    question: 'Dlaczego używanie !important uchodzi za złą praktykę?',
+    answer:
+      'Dyrektywa !important zaburza naturalną kaskadę CSS, wymuszając daną deklarację ponad wszelkimi innymi regułami. Prowadzi to do konfliktów trudnych do debugowania w dużych projektach. Metodologie takie jak BEM zalecają utrzymywanie płaskiej specyficzności, by nigdy nie potrzebować !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Wpisz pierwszy selektor',
+    text: 'Wpisz Selektor A w lewym polu tekstowym, na przykład: #header .nav-item > a. Liczniki ID, Klas i Elementów zaktualizują się natychmiast.',
+  },
+  {
+    name: 'Wpisz drugi selektor',
+    text: 'Wpisz Selektor B w prawym polu tekstowym, na przykład: ul li.active a:hover. Obserwuj, jak wagi zmieniają się w czasie rzeczywistym.',
+  },
+  {
+    name: 'Odczytaj wynik',
+    text: 'Kalkulator podświetli zielonym banerem blok zwycięskiego selektora. W przypadku remisu pojawi się komunikat wyjaśniający, że decyduje porządek kaskady.',
+  },
+];
+
+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: 'pl',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selektor A',
+  labelB: 'Selektor B',
+  placeholderA: 'np. #header .nav-item > a',
+  placeholderB: 'np. ul li.active a:hover',
+  cardIds: 'ID',
+  cardClasses: 'Klasy / Pseudo',
+  cardElements: 'Elementy',
+  bannerWinner: 'Ten selektor wygrywa!',
+  msgTie: 'Oba selektory mają tę samą wagę. Jeśli rywalizują o ten sam element, wygrywa ten napisany <strong>jako ostatni</strong> w CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często zadawane pytania',
+  faq: faqData,
+  bibliographyTitle: 'Źródła i Dokumentacja',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: Specyficzność CSS',
+      url: 'https://developer.mozilla.org/pl/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Specyficzność',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Czym jest specyficzność CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Specyficzność CSS to algorytm, według którego przeglądarki decydują, które wartości właściwości zastosować do danego elementu. To nic innego jak matematyczny wynik, który mówi przeglądarce, jak bardzo „szczegółowa" jest dana reguła.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Jeśli dwie reguły mają różne poziomy specyficzności, wygrywa ta o wyższej wadze — niezależnie od kolejności, w jakiej zostały napisane. Gdy obie mają tę samą wagę, decyduje ta zadeklarowana później w kodzie źródłowym.',
+    },
+    {
+      type: 'title',
+      text: 'Jak oblicza się specyficzność CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Specyficzność obliczana jest w oparciu o trzy kategorie, tworzące trzycyfrową wagę, często zapisywaną jako <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Kolumna A (ID):</strong> Liczy liczbę unikalnych identyfikatorów. Przykład: <code>#header</code> to 1 w kolumnie A.',
+        '<strong>Kolumna B (Klasy, Atrybuty i Pseudoklasy):</strong> Liczy wszystkie klasy (<code>.button</code>), atrybuty (<code>[type="text"]</code>) i pseudoklasy (<code>:hover</code>).',
+        '<strong>Kolumna C (Elementy i Pseudoelementy):</strong> Liczy wszystkie elementy HTML (<code>div</code>, <code>h1</code>) i pseudoelementy (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Złota zasada: brak przeniesień między kolumnami',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Reguła o specyficzności (0,50,0) <strong>nigdy</strong> nie będzie bardziej szczegółowa niż reguła (1,0,0). <strong>Jeden ID bije nieskończoną liczbę klas.</strong> Kolumny nigdy nie przelewają się do siebie.',
+    },
+    {
+      type: 'title',
+      text: 'Problem z !important i architektura BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dyrektywa <code>!important</code> stanowi wyjątek od zasad specyficzności. Gdy zostanie użyta, dana deklaracja automatycznie nadpisuje każdą inną. Uchodzi za złą praktykę, bo niszczy naturalną kaskadę.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Aby unikać wojen specyficzności w dużych projektach, metodologie takie jak <strong>BEM</strong> promują stosowanie wyłącznie jednopoziomowych selektorów klasowych, sztucznie utrzymując specyficzność na płaskim poziomie (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/pt.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 = 'calculadora-especificidade-css';
+const title = 'Calculadora de Especificidade CSS Online. Visualizador de Peso de Seletores';
+const description =
+  'Calcule a especificidade e o peso exato de qualquer seletor CSS. Ferramenta visual para entender qual regra CSS vence a cascata e evitar o uso de !important.';
+
+const faqData = [
+  {
+    question: 'O que é especificidade CSS?',
+    answer:
+      'A especificidade é o algoritmo que os browsers usam para decidir qual regra CSS aplicar a um elemento quando várias regras competem entre si. É representada como uma pontuação de três colunas (A, B, C) que indica, respetivamente, IDs, classes/atributos/pseudo-classes e elementos/pseudo-elementos.',
+  },
+  {
+    question: 'Uma classe pode alguma vez superar um ID em especificidade?',
+    answer:
+      'Não diretamente. Um ID (1,0,0) bate sempre qualquer número de classes (0,N,0), porque a especificidade não tem transporte numérico entre colunas. Cem classes (0,100,0) nunca vão superar um único ID (1,0,0).',
+  },
+  {
+    question: 'O que acontece quando dois seletores têm a mesma especificidade?',
+    answer:
+      'Quando dois seletores têm exatamente o mesmo peso, vence aquele que foi declarado por último no ficheiro CSS. A isso chama-se a ordem natural da cascata. Esta calculadora avisa-te visualmente quando ocorre um empate.',
+  },
+  {
+    question: 'Por que usar !important é considerado má prática?',
+    answer:
+      'A diretiva !important quebra a cascata CSS natural ao forçar uma declaração sobre qualquer outra regra. Isso cria conflitos difíceis de depurar em projetos grandes. Metodologias como o BEM defendem manter a especificidade plana para nunca precisar de !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Escreve o primeiro seletor',
+    text: 'Escreve o Seletor A no campo de texto da esquerda, por exemplo: #header .nav-item > a. Os contadores de IDs, Classes e Elementos atualizam-se instantaneamente.',
+  },
+  {
+    name: 'Escreve o segundo seletor',
+    text: 'Escreve o Seletor B no campo de texto da direita, por exemplo: ul li.active a:hover. Observa como os pesos mudam em tempo real.',
+  },
+  {
+    name: 'Lê o resultado',
+    text: 'A calculadora realça com um banner verde o bloco do seletor vencedor. Se ambos empatarem, aparece uma mensagem a explicar que a ordem da cascata serve de desempate.',
+  },
+];
+
+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: 'pt',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Seletor A',
+  labelB: 'Seletor B',
+  placeholderA: 'ex. #header .nav-item > a',
+  placeholderB: 'ex. ul li.active a:hover',
+  cardIds: 'IDs',
+  cardClasses: 'Classes / Pseudos',
+  cardElements: 'Elementos',
+  bannerWinner: 'Este seletor vence!',
+  msgTie: 'Ambos os seletores têm o mesmo peso. Se competirem pelo mesmo elemento, vence o que estiver escrito <strong>por último</strong> no CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências e Documentação',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: Especificidade CSS',
+      url: 'https://developer.mozilla.org/pt/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Especificidade',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'O que é a Especificidade CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'A especificidade CSS é o algoritmo pelo qual os browsers decidem que valores de propriedades aplicar a um determinado elemento. É essencialmente uma pontuação matemática que diz ao browser "quão específica" é uma regra.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Se duas regras têm níveis de especificidade diferentes, vence a que tiver maior peso, independentemente da ordem em que foram escritas. Se tiverem o mesmo peso, vence a última declarada no código fonte.',
+    },
+    {
+      type: 'title',
+      text: 'Como calcular a especificidade CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'A especificidade calcula-se com base em três categorias que formam um peso de três colunas, normalmente expresso como <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Coluna A (IDs):</strong> Conta o número de identificadores únicos. Exemplo: <code>#header</code> conta como 1 na coluna A.',
+        '<strong>Coluna B (Classes, Atributos e Pseudo-classes):</strong> Conta todas as classes (<code>.button</code>), atributos (<code>[type="text"]</code>) e pseudo-classes (<code>:hover</code>).',
+        '<strong>Coluna C (Elementos e Pseudo-elementos):</strong> Conta todos os elementos HTML (<code>div</code>, <code>h1</code>) e pseudo-elementos (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'A regra de ouro: sem transporte numérico',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Uma regra com especificidade (0,50,0) <strong>nunca</strong> será mais específica do que uma regra (1,0,0). <strong>Um único ID bate infinitas classes.</strong> As colunas nunca transbordam umas para as outras.',
+    },
+    {
+      type: 'title',
+      text: 'O problema do !important e a arquitetura BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'A diretiva <code>!important</code> é uma exceção às regras de especificidade. Quando usada, essa declaração sobrescreve automaticamente qualquer outra. Considera-se má prática porque destrói a cascata natural.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Para evitar guerras de especificidade em projetos grandes, metodologias como o <strong>BEM</strong> defendem o uso exclusivo de seletores de classe com um único nível de profundidade, mantendo artificialmente a especificidade plana em (0,1,0).',
+    },
+  ],
+};