@jjlmoya/utils-developer 1.2.0

package/src/tool/cssSpecificityCalculator/component.astro

@@ -0,0 +1,292 @@
+---
+import type { KnownLocale } from '../../types';
+import type { CssSpecificityCalculatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as CssSpecificityCalculatorUI;
+---
+
+<div class="spec-root">
+  <div class="spec-card">
+    <div class="spec-comparison">
+      <div class="spec-vs">VS</div>
+
+      <div class="spec-block" id="spec-block-a">
+        <div class="spec-winner-banner" id="spec-banner-a" set:html={t.bannerWinner}></div>
+        <div class="spec-field">
+          <label for="spec-input-a" class="spec-field-label">{t.labelA}</label>
+          <input
+            type="text"
+            id="spec-input-a"
+            class="spec-input"
+            placeholder={t.placeholderA}
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </div>
+        <div class="spec-counters">
+          <div class="spec-counter spec-counter-ids">
+            <span class="spec-counter-value" id="spec-res-a-ids">0</span>
+            <span class="spec-counter-label">{t.cardIds}</span>
+          </div>
+          <div class="spec-counter spec-counter-cls">
+            <span class="spec-counter-value" id="spec-res-a-cls">0</span>
+            <span class="spec-counter-label">{t.cardClasses}</span>
+          </div>
+          <div class="spec-counter spec-counter-els">
+            <span class="spec-counter-value" id="spec-res-a-els">0</span>
+            <span class="spec-counter-label">{t.cardElements}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="spec-block" id="spec-block-b">
+        <div class="spec-winner-banner" id="spec-banner-b" set:html={t.bannerWinner}></div>
+        <div class="spec-field">
+          <label for="spec-input-b" class="spec-field-label">{t.labelB}</label>
+          <input
+            type="text"
+            id="spec-input-b"
+            class="spec-input"
+            placeholder={t.placeholderB}
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </div>
+        <div class="spec-counters">
+          <div class="spec-counter spec-counter-ids">
+            <span class="spec-counter-value" id="spec-res-b-ids">0</span>
+            <span class="spec-counter-label">{t.cardIds}</span>
+          </div>
+          <div class="spec-counter spec-counter-cls">
+            <span class="spec-counter-value" id="spec-res-b-cls">0</span>
+            <span class="spec-counter-label">{t.cardClasses}</span>
+          </div>
+          <div class="spec-counter spec-counter-els">
+            <span class="spec-counter-value" id="spec-res-b-els">0</span>
+            <span class="spec-counter-label">{t.cardElements}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="spec-tie-msg" id="spec-tie-msg" set:html={t.msgTie}></div>
+  </div>
+</div>
+
+<style>
+  .spec-root {
+    --spec-primary: #8b5cf6;
+    --spec-primary-dark: #7c3aed;
+    --spec-success: #10b981;
+    --spec-card-bg: #fff;
+    --spec-bg: #f8fafc;
+    --spec-text: #0f172a;
+    --spec-text-muted: #64748b;
+    --spec-border: #e2e8f0;
+
+    max-width: 900px;
+    margin: 2rem auto;
+    color: var(--spec-text);
+  }
+
+  :global(.theme-dark) .spec-root {
+    --spec-card-bg: #1e293b;
+    --spec-bg: #0f172a;
+    --spec-text: #f1f5f9;
+    --spec-text-muted: #94a3b8;
+    --spec-border: #334155;
+  }
+
+  .spec-card {
+    background: var(--spec-card-bg);
+    border: 1px solid var(--spec-border);
+    border-radius: 1.25rem;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .spec-comparison {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    position: relative;
+  }
+
+  @media (max-width: 768px) {
+    .spec-comparison {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .spec-vs {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--spec-primary);
+    color: #fff;
+    font-weight: 800;
+    width: 2.75rem;
+    height: 2.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 3px solid var(--spec-card-bg);
+    z-index: 10;
+    font-size: 0.85rem;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+  }
+
+  @media (max-width: 768px) {
+    .spec-vs {
+      display: none;
+    }
+  }
+
+  .spec-block {
+    background: var(--spec-bg);
+    border: 2px solid var(--spec-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.25s, box-shadow 0.25s, padding-top 0.25s;
+  }
+
+  .spec-winner-banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--spec-success);
+    color: #fff;
+    text-align: center;
+    font-weight: 700;
+    padding: 0.3rem;
+    font-size: 0.8rem;
+    transform: translateY(-100%);
+    transition: transform 0.25s;
+  }
+
+  .spec-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .spec-field-label {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--spec-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .spec-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    color: var(--spec-text);
+    background: var(--spec-card-bg);
+    border: 1px solid var(--spec-border);
+    border-radius: 0.75rem;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box;
+  }
+
+  .spec-input:focus {
+    border-color: var(--spec-primary);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  }
+
+  .spec-counters {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.625rem;
+  }
+
+  .spec-counter {
+    background: var(--spec-card-bg);
+    border: 1px solid var(--spec-border);
+    border-radius: 0.75rem;
+    padding: 0.875rem 0.5rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .spec-counter-ids {
+    border-bottom: 3px solid #ef4444;
+  }
+
+  .spec-counter-cls {
+    border-bottom: 3px solid #3b82f6;
+  }
+
+  .spec-counter-els {
+    border-bottom: 3px solid #10b981;
+  }
+
+  .spec-counter-value {
+    font-size: 2.25rem;
+    font-weight: 800;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .spec-counter-ids .spec-counter-value {
+    color: #ef4444;
+  }
+
+  .spec-counter-cls .spec-counter-value {
+    color: #3b82f6;
+  }
+
+  .spec-counter-els .spec-counter-value {
+    color: #10b981;
+  }
+
+  .spec-counter-label {
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+    color: var(--spec-text-muted);
+  }
+
+  .spec-tie-msg {
+    text-align: center;
+    padding: 0.875rem 1.25rem;
+    background: var(--spec-bg);
+    border: 1px solid var(--spec-border);
+    border-radius: 0.875rem;
+    color: var(--spec-text);
+    font-weight: 600;
+    font-size: 0.9rem;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.25s, transform 0.25s;
+  }
+</style>
+
+<script>
+  import { setupCalculator } from './ui-controller';
+  setupCalculator();
+</script>
+

package/src/tool/cssSpecificityCalculator/i18n/en.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-specificity-calculator';
+const title = 'CSS Specificity Calculator Online. Selector Weight Visualizer';
+const description =
+  'Calculate the specificity and exact weight of any CSS selector. Visual tool to understand which CSS rule wins the cascade and avoid using !important.';
+
+const faqData = [
+  {
+    question: 'What is CSS specificity?',
+    answer:
+      'Specificity is the algorithm browsers use to decide which CSS rule applies to an element when multiple rules compete. It is represented as a three-column score (A, B, C) indicating IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements respectively.',
+  },
+  {
+    question: 'Can a class ever beat an ID in specificity?',
+    answer:
+      'Not directly. An ID (1,0,0) always beats any number of classes (0,N,0) because specificity has no carry-over between columns. A hundred classes (0,100,0) will never beat a single ID (1,0,0).',
+  },
+  {
+    question: 'What happens when two selectors have the same specificity?',
+    answer:
+      'When two selectors have exactly the same weight, the one declared last in the CSS file wins. This is known as natural cascade order. This calculator visually alerts you when a tie occurs.',
+  },
+  {
+    question: 'Why is using !important considered bad practice?',
+    answer:
+      'The !important directive breaks the natural CSS cascade by forcing a declaration over any other rule. This creates conflicts that are hard to debug in large projects. Methodologies like BEM advocate for keeping specificity flat to avoid ever needing !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Enter the first selector',
+    text: 'Type Selector A in the left text field, for example: #header .nav-item > a. The IDs, Classes and Elements counters will update instantly.',
+  },
+  {
+    name: 'Enter the second selector',
+    text: 'Type Selector B in the right text field, for example: ul li.active a:hover. Watch how the weights change in real time.',
+  },
+  {
+    name: 'Read the result',
+    text: 'The calculator will highlight the winning selector block with a green banner. If both tie, a tie message will appear explaining cascade order as the 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: 'en',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selector A',
+  labelB: 'Selector B',
+  placeholderA: 'e.g. #header .nav-item > a',
+  placeholderB: 'e.g. ul li.active a:hover',
+  cardIds: 'IDs',
+  cardClasses: 'Classes / Pseudos',
+  cardElements: 'Elements',
+  bannerWinner: 'This selector wins!',
+  msgTie: 'Both selectors have the same weight. If they compete for the same element, the one written <strong>last</strong> in the CSS wins.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References and Documentation',
+  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: 'What Is CSS Specificity?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'CSS specificity is the algorithm by which browsers decide which property values to apply to a particular element. It is essentially a mathematical score that tells the browser "how specific" a rule is.',
+    },
+    {
+      type: 'paragraph',
+      html: 'If two rules have different specificity levels, the one with the higher weight will win, regardless of the order in which they were written. If both have the same weight, the last one declared in the source code wins.',
+    },
+    {
+      type: 'title',
+      text: 'How to Calculate CSS Specificity',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Specificity is calculated based on three categories forming a three-column weight, often expressed as <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Column A (IDs):</strong> Counts the number of unique identifiers. Example: <code>#header</code> counts as 1 in column A.',
+        '<strong>Column B (Classes, Attributes and Pseudo-classes):</strong> Counts all classes (<code>.button</code>), attributes (<code>[type="text"]</code>) and pseudo-classes (<code>:hover</code>).',
+        '<strong>Column C (Elements and Pseudo-elements):</strong> Counts all HTML elements (<code>div</code>, <code>h1</code>) and pseudo-elements (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'The Golden Rule: No Numeric Carry-Over',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'A rule with specificity (0,50,0) will <strong>never</strong> be more specific than a rule (1,0,0). <strong>A single ID beats infinite classes.</strong> Columns never overflow into each other.',
+    },
+    {
+      type: 'title',
+      text: 'The Problem With !important and BEM Architecture',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The <code>!important</code> directive is an exception to specificity rules. When used, that declaration automatically overrides any other. It is considered bad practice because it destroys the natural cascade.',
+    },
+    {
+      type: 'paragraph',
+      html: 'To avoid specificity wars in large projects, methodologies like <strong>BEM</strong> advocate for using only single-depth class selectors, artificially keeping specificity flat at (0,1,0).',
+    },
+  ],
+};

package/src/tool/cssSpecificityCalculator/i18n/es.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-especificidad-css';
+const title = 'Calculadora de Especificidad CSS Online. Visualizador de Peso';
+const description =
+  'Calcula la especificidad y peso exacto de cualquier selector CSS. Herramienta visual para entender qué regla CSS gana la cascada y evitar el uso de !important.';
+
+const faqData = [
+  {
+    question: '¿Qué es la especificidad en CSS?',
+    answer:
+      'La especificidad es el algoritmo que usan los navegadores para decidir qué regla CSS se aplica a un elemento cuando varias reglas compiten por él. Se representa como una puntuación de tres columnas (A, B, C) que indica IDs, clases/atributos/pseudoclases y elementos/pseudoelementos respectivamente.',
+  },
+  {
+    question: '¿Puede una clase superar a un ID en especificidad?',
+    answer:
+      'No directamente. Un ID (1,0,0) siempre vence a cualquier número de clases (0,N,0) porque la especificidad no tiene acarreo numérico entre columnas. Cien clases (0,100,0) nunca superarán a un solo ID (1,0,0).',
+  },
+  {
+    question: '¿Qué ocurre cuando dos selectores tienen la misma especificidad?',
+    answer:
+      'Cuando dos selectores tienen exactamente el mismo peso, gana el que esté declarado último en el archivo CSS. Es lo que se conoce como el orden de la cascada natural. Esta calculadora te avisa visualmente cuando se produce un empate.',
+  },
+  {
+    question: '¿Por qué se considera mala práctica usar !important?',
+    answer:
+      'La directiva !important rompe la cascada natural del CSS al forzar una declaración sobre cualquier otra regla. Esto genera conflictos difíciles de depurar en proyectos grandes y hace el mantenimiento del código frustrante. Metodologías como BEM abogan por mantener la especificidad plana para evitar necesitar !important.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Escribe el primer selector',
+    text: 'Introduce el Selector A en el campo de texto de la izquierda, por ejemplo: #header .nav-item > a. Los contadores de IDs, Clases y Elementos se actualizarán al instante.',
+  },
+  {
+    name: 'Escribe el segundo selector',
+    text: 'Introduce el Selector B en el campo de texto de la derecha, por ejemplo: ul li.active a:hover. Observa cómo cambian los pesos en tiempo real.',
+  },
+  {
+    name: 'Lee el resultado',
+    text: 'La calculadora resaltará con un banner verde el bloque del selector ganador. Si ambos empatan, aparecerá un mensaje de empate explicando el desempate por orden de cascada.',
+  },
+];
+
+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: 'es',
+};
+
+const ui: CssSpecificityCalculatorUI = {
+  labelA: 'Selector A',
+  labelB: 'Selector B',
+  placeholderA: 'ej. #header .nav-item > a',
+  placeholderB: 'ej. ul li.active a:hover',
+  cardIds: 'IDs',
+  cardClasses: 'Clases / Pseudos',
+  cardElements: 'Elementos',
+  bannerWinner: '¡Este selector gana!',
+  msgTie: 'Ambos selectores tienen el mismo peso. Si compiten por el mismo elemento, ganará el que esté escrito <strong>último</strong> en el CSS.',
+};
+
+export const content: ToolLocaleContent<CssSpecificityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: Especificidad en CSS',
+      url: 'https://developer.mozilla.org/es/docs/Web/CSS/Specificity',
+    },
+    {
+      name: 'W3C: Selectors Level 3 - Especificidad',
+      url: 'https://www.w3.org/TR/selectors-3/#specificity',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '¿Qué es la Especificidad en CSS?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La especificidad en CSS es el algoritmo mediante el cual los navegadores deciden qué valores de las propiedades aplicarán a un elemento. Básicamente, es una puntuación matemática que indica al navegador "cuán específica" es una regla.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Si dos reglas tienen diferentes niveles de especificidad, ganará la que tenga mayor peso, sin importar el orden en el que fueron escritas. Si ambas tienen el mismo peso, ganará la última declarada en el código fuente.',
+    },
+    {
+      type: 'title',
+      text: 'Cómo calcular la Especificidad CSS',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La especificidad se calcula en tres categorías que forman un peso de tres columnas, expresado como <strong>(A, B, C)</strong>:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Columna A (IDs):</strong> Suma el número de identificadores únicos. Ejemplo: <code>#header</code> cuenta como 1 en la columna A.',
+        '<strong>Columna B (Clases, Atributos y Pseudos):</strong> Suma todas las clases (<code>.button</code>), atributos (<code>[type="text"]</code>) y pseudo-clases (<code>:hover</code>).',
+        '<strong>Columna C (Elementos y Pseudo-elementos):</strong> Suma todos los elementos HTML (<code>div</code>, <code>h1</code>) y pseudo-elementos (<code>::before</code>).',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'La regla de oro: no hay acarreo numérico',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Una regla con especificidad (0,50,0) <strong>nunca</strong> será más específica que una regla (1,0,0). <strong>Un solo ID vence a infinitas clases.</strong> Las columnas no se trasladan entre sí.',
+    },
+    {
+      type: 'title',
+      text: 'El problema de !important y la arquitectura BEM',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La directiva <code>!important</code> es una excepción a las reglas de especificidad. Cuando la utilizas, esa declaración sobrescribe cualquier otra automáticamente. Se considera mala práctica ya que destruye la cascada natural.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Para evitar guerras de especificidad en proyectos grandes, metodologías como <strong>BEM</strong> abogan por el uso exclusivo de selectores de clase a un único nivel de profundidad, manteniendo la especificidad plana en (0,1,0).',
+    },
+  ],
+};