Nidaamka Naqshadaynta (CSS Architecture)

Marka koodka CSS-ta uu aad u kordho oo uu dhaafo 5000 oo sadar (lines), waxaa khasab ah inuu yeesho nidaam dhisid oo qorshaysan [1]. Qaababka ay ka mid yihiin BEM naming, nidaamyada naqshadaynta (design systems), utility-first CSS, iyo component-based CSS waa habab caalami ah oo loo adeegsado maamulidda mashaariicda waaweyn ee CSS [1]. Casharkan waxaan ku baran doonnaa sida loo nidaamiyo CSS-ta si uu koodku u noqdo mid si dhib yar loo dayactiri karo, la ballarin karo, isla markaana ay kooxuhu ugu wada shaqayn karaan si habsmooth ah [1].

BEM Naming — Block__Element—Modifier

BEM waa hab-magacaabe (naming convention) aad u caan ah o loo adeegsado CSS:

.block {}                    /* Curiyaha ugu muhiimsan ee madaxa-bannaan (Block) */
.block__element {}          /* Faraca ama qayb hoosaad ka mid ah curiyaha sare (Element) */
.block--modifier {}         /* Isbeddelka ama kala-duwanaanta lagu samaynayo qaabka (Modifier) */

/* Block */
.card {}

/* Element */
.card__title {}
.card__description {}
.card__image {}
.card__footer {}

/* Modifier */
.card--featured {}
.card--compact {}
.card--dark {}

Tusaale dhab ah oo ku saabsan hannaanka BEM:

<div class="card card--featured">
  <img class="card__image" src="image.jpg" alt="">
  <h3 class="card__title">Cinwaanka</h3>
  <p class="card__description">Qoraalka kaadhka...</p>
  <div class="card__footer">
    <button class="button button--primary">Akhri</button>
  </div>
</div>

Faa’iidooyinka uu leeyahay BEM Naming:

Mabaadi’da Utility-First CSS

Nidaamka Utility-first (sida Tailwind CSS oo kale) wuxuu si buuxda ugu tiirsan yahay classes aad u yaryar oo mid kastaaba uu qabto hal sifo oo qura:

/* Masaafada (Spacing) */
.m-0 { margin: 0; }
.m-2 { margin: 8px; }
.m-4 { margin: 16px; }
.p-2 { padding: 8px; }
.p-4 { padding: 16px; }
.mt-4 { margin-top: 16px; }

/* Midabada (Color) */
.text-primary { color: #3b82f6; }
.text-dark { color: #0f172a; }
.bg-white { background: white; }
.bg-gray { background: #f8fafc; }

/* Habaynta Flexbox (Flex) */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }

/* Farta iyo Qoraalka (Typography) */
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }

Tusaale ahaan hannaanka loo adeegsado:

<div class="flex items-center gap-2 p-4 bg-white rounded-lg shadow-sm">
  <img class="rounded-full w-10 h-10" src="avatar.jpg">
  <div>
    <h3 class="text-lg font-bold">Magac</h3>
    <p class="text-sm text-gray-500">Role</p>
  </div>
</div>

Naqshadaynta ku salaysan Curiyayaasha (Component-Based CSS)

Hannaankan, curiye kasta oo madax-bannaan wuxuu leeyahay faylkiisa gaarka ah oo si gooni ah loo maamulo:

styles/
  reset.css
  tokens.css
  base/
    typography.css
    colors.css
  components/
    button.css
    card.css
    navbar.css
    form.css
  utilities/
    spacing.css
    text.css
  print.css

Maamulidda awoodda gaarka ah (Specificity Management)

Awoodda gaarka ah ee xulayaasha (Specificity) waa mid ka mid ah sababaha ugu waaweyn ee koodka CSS-tu uu u qasmo mashaariicda dambe. Waa kuwan xeerarka muhiimka ah:

/* Habka ugu habboon — ee la adeegsado: */
.class-name { }                    /* 0-0-1-0 */

/* Iska ilaali intii suurtogal ah: */
#id-name { }                       /* 0-1-0-0 — Aad u culus */
!important { }                     /* Awood aan xad lahayn — ISKA ILAALI gebi ahaanba */

/* Markay isku awood yihiin — kan dambe ayaa shaqaynaya: */
.btn { background: blue; }
.btn { background: red; }          /* Xeerka cas (red) ayaa shaqaynaya */

Kala-sarreynta Awoodda Specificity-ga

Nidaamka Calaamadaha ee Isbeddelayaasha CSS

Sida loo habeeyo calaamadaha rasmiga ah ee naqshadaynta (design tokens) adoo adeegsanaya isbeddelayaasha CSS:

:root {
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Color tokens */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #8b5cf6;
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-border: #e2e8f0;
  --color-success: #22c55e;
  --color-error: #ef4444;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08);
}

Naqshadaynta warqadaha la daabacayo (Print Stylesheet)

Marka uu isticmaalahu daabacayo bogga mareegta, waxaad u diyaarin kartaa CSS gaar ah oo shaqaysa oo qura xilliga daabacaadda:

@media print {
  /* Qari qaybaha aan loo baahnayn xilliga daabacaadda: */
  nav, footer, .sidebar, .btn, .ads {
    display: none !important;
  }

  /* Habaynta qoraalka maqaalka si uu u buuxiyo warqadda: */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  /* Ilaalinta jidbada iyo goynta bogga (Page Breaks): */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  /* Muujinta URL-ka dhabta ah ee xiriiriyayaasha marka la daabaco: */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

Tusaale Mashruuc Dhamaystiran oo ku saabsan CSS Architecture

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mini Design System — BEM</title>

  <style>
    /* ============================================
       CALAAMADAHA NAQSHADEYNTA (CSS Custom Properties)
    ============================================ */
    :root {
      --color-primary: #3b82f6;
      --color-primary-hover: #2563eb;
      --color-secondary: #8b5cf6;
      --color-text: #0f172a;
      --color-text-secondary: #64748b;
      --color-bg: #ffffff;
      --color-bg-secondary: #f8fafc;
      --color-border: #e2e8f0;
      --color-success: #22c55e;
      --color-error: #ef4444;

      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-2xl: 48px;

      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.5rem;

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-full: 9999px;

      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08);
    }

    /* ============================================
       DIB-U-DEJINTA (RESET)
    ============================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* ============================================
       MABAADI'DA AAS-AASIGA AH (BASE)
    ============================================ */
    body {
      font-family: system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg-secondary);
      line-height: 1.6;
      padding: 40px 20px;
    }

    /* ============================================
       CURIYAHA BADHANKA (COMPONENT: Button BEM)
    ============================================ */
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      padding: 10px 22px;
      font-size: var(--text-sm);
      font-weight: 600;
      font-family: inherit;
      border: none;
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .button--primary {
      background: var(--color-primary);
      color: white;
    }
    .button--primary:hover {
      background: var(--color-primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    }

    .button--secondary {
      background: transparent;
      border: 1.5px solid var(--color-border);
      color: var(--color-text);
    }
    .button--secondary:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .button--danger {
      background: var(--color-error);
      color: white;
    }
    .button--danger:hover {
      background: #dc2626;
    }

    .button--small {
      padding: 6px 14px;
      font-size: 0.8rem;
    }

    .button--large {
      padding: 14px 32px;
      font-size: var(--text-base);
    }

    /* ============================================
       CURIYAHA KAADHKA (COMPONENT: Card BEM)
    ============================================ */
    .card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      transition: all 0.2s ease;
    }

    .card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .card__header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
    }

    .card__icon {
      font-size: 1.5rem;
    }

    .card__title {
      font-size: var(--text-lg);
      font-weight: 700;
    }

    .card__description {
      color: var(--color-text-secondary);
      font-size: var(--text-sm);
      line-height: 1.7;
      margin-bottom: var(--space-md);
    }

    .card__footer {
      display: flex;
      gap: var(--space-sm);
    }

    /* Modifiers */
    .card--featured {
      border-color: var(--color-primary);
      border-width: 2px;
      position: relative;
    }

    .card--featured::before {
      content: "✦ Featured";
      position: absolute;
      top: -10px;
      right: var(--space-md);
      background: var(--color-primary);
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: var(--radius-full);
    }

    .card--compact {
      padding: var(--space-md);
    }

    .card--compact .card__description {
      display: none;
    }

    /* ============================================
       CURIYAHA CALAAMADDA (COMPONENT: Badge BEM)
    ============================================ */
    .badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 2px 10px;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .badge--success {
      background: #dcfce7;
      color: #166534;
    }

    .badge--warning {
      background: #fef3c7;
      color: #92400e;
    }

    .badge--error {
      background: #fee2e2;
      color: #991b1b;
    }

    .badge--info {
      background: #dbeafe;
      color: #1e40af;
    }

    /* ============================================
       CAAWIME-YAASHA (UTILITIES)
    ============================================ */
    .flex  { display: flex; }
    .grid  { display: grid; }
    .gap-xs { gap: var(--space-xs); }
    .gap-sm { gap: var(--space-sm); }
    .gap-md { gap: var(--space-md); }
    .gap-lg { gap: var(--space-lg); }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .mt-md { margin-top: var(--space-md); }
    .mb-md { margin-bottom: var(--space-md); }
    .p-lg { padding: var(--space-lg); }
    .text-center { text-align: center; }
    .text-sm { font-size: var(--text-sm); }
    .text-secondary { color: var(--color-text-secondary); }

    /* ============================================
       QAAB-DHISMEEDKA BOGGA (PAGE LAYOUT)
    ============================================ */
    .page {
      max-width: 800px;
      margin: 0 auto;
    }

    .page__title {
      font-size: var(--text-2xl);
      margin-bottom: var(--space-xs);
    }

    .page__subtitle {
      color: var(--color-text-secondary);
      margin-bottom: var(--space-xl);
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-2xl);
    }

    .demo-row {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
      margin-bottom: var(--space-lg);
    }

    h2 {
      font-size: var(--text-xl);
      margin: var(--space-xl) 0 var(--space-md);
    }

    h3 {
      font-size: var(--text-lg);
      margin: var(--space-lg) 0 var(--space-sm);
    }

    code {
      background: var(--color-bg-secondary);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.85em;
    }

    /* ============================================
       DAABACAADDA (PRINT)
    ============================================ */
    @media print {
      nav, .demo-row, .card__footer { display: none !important; }
      body { font-size: 12pt; color: black; background: white; }
      .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
      .page { max-width: 100%; }
    }
  </style>
</head>
<body>

<div class="page">
  <h1 class="page__title">🎨 Mini Design System</h1>
  <p class="page__subtitle">BEM naming · CSS Custom Properties · 3 components: Button, Card, Badge</p>

  <!-- Buttons -->
  <h2>Badhamada (Button Component)</h2>
  <div class="demo-row">
    <button class="button button--primary">Primary</button>
    <button class="button button--secondary">Secondary</button>
    <button class="button button--danger">Danger</button>
    <button class="button button--primary button--small">Small</button>
    <button class="button button--primary button--large">Large</button>
  </div>

  <!-- Badges -->
  <h2>Calaamadaha (Badge Component)</h2>
  <div class="demo-row">
    <span class="badge badge--success">Success</span>
    <span class="badge badge--warning">Warning</span>
    <span class="badge badge--error">Error</span>
    <span class="badge badge--info">Info</span>
  </div>

  <!-- Cards -->
  <h2>Kaadhadhka (Card Component)</h2>
  <div class="card-grid">
    <div class="card">
      <div class="card__header">
        <span class="card__icon">📖</span>
        <h3 class="card__title">CSS Aasaasiga ah</h3>
      </div>
      <p class="card__description">Baro CSS-ka bilowga — selectors, colors, typography, iyo box model.</p>
      <div class="card__footer">
        <button class="button button--primary button--small">Ku Bilaab</button>
        <button class="button button--secondary button--small">Sii Akhri</button>
      </div>
    </div>

    <div class="card card--featured">
      <div class="card__header">
        <span class="card__icon">🧩</span>
        <h3 class="card__title">CSS Grid</h3>
      </div>
      <p class="card__description">Qaab-dhismeedka laba-jiho ee layout-ka — tiirar, safo, areas, iyo auto-fill.</p>
      <div class="card__footer">
        <button class="button button--primary button--small">Ku Bilaab</button>
        <button class="button button--secondary button--small">Sii Akhri</button>
      </div>
    </div>

    <div class="card card--compact">
      <div class="card__header">
        <span class="card__icon">✨</span>
        <h3 class="card__title">Animations</h3>
      </div>
      <div class="card__footer">
        <button class="button button--primary button--small">Ku Bilaab</button>
      </div>
    </div>

    <div class="card">
      <div class="card__header">
        <span class="card__icon">📱</span>
        <h3 class="card__title">Responsive Design</h3>
      </div>
      <p class="card__description">Mobile-first, media queries, clamp(), iyo fluid layouts.</p>
      <div class="card__footer">
        <button class="button button--primary button--small">Ku Bilaab</button>
      </div>
    </div>
  </div>

  <!-- Architecture overview -->
  <h2>Kala-sarreynta CSS (CSS Architecture)</h2>
  <div class="card-grid" style="grid-template-columns: 1fr;">
    <div class="card">
      <div class="card__header">
        <span class="card__icon">📂</span>
        <h3 class="card__title">Habaynta Faylasha (File Organization)</h3>
      </div>
      <p class="card__description">
        <code>tokens.css</code> — Isbeddelayaasha CSS (spacing, colors, type scale)<br>
        <code>reset.css</code> — Dhib-u-dejinta Box-sizing iyo margin/padding<br>
        <code>base.css</code> — Typography, body, iyo xiriiriyayaasha<br>
        <code>components/</code> — Badhanka, Kaadhka, Calaamadda, iyo Foomka (BEM)<br>
        <code>utilities.css</code> — Flex, gap, iyo caawiyayaasha qoraalka<br>
        <code>print.css</code> — Qaababka loogu talagalay @media print
      </p>
      <div class="card__footer">
        <span class="badge badge--info">BEM</span>
        <span class="badge badge--success">Modular</span>
      </div>
    </div>
  </div>

  <!-- Print note -->
  <p class="text-sm text-secondary mt-md">
    🖨️ Boggan waa la daabaci karaa — xeerka <code>@media print</code> ayaa si toos ah u qarinaya qaybaha aan muhiimka ahayn.
  </p>
</div>

</body>
</html>

Casharka xiga: Waxaan dhoodhoobi doonnaa Mashruuca Gabagabada (Final Capstone Project) — dhisidda Website Dhammaystiran oo casri ah.