CSS - SOMO LA 27: Kutumia @import Katika CSS

? Utangulizi

Wakati mwingine, unapotengeneza tovuti kubwa au unataka kugawanya mitindo (styles) kwenye mafaili tofauti kwa urahisi wa usimamizi, unaweza kutumia @import ili kuunganisha faili hizo ndani ya faili kuu la CSS.

Hii hufanya CSS iwe modular (imegawanyika vizuri), mfano unaweza kuwa na:

• colors.css — kwa rangi

• layout.css — kwa mpangilio

• typography.css — kwa fonti

? Maudhui ya Somo

✅ 1. Syntax ya @import

Unaweza kutumia njia hizi mbili:

@import "style.css";

Au:

@import url("style.css");

Unaiweka juu kabisa ya faili la CSS, kabla ya styles nyingine yoyote:

@import "reset.css";
@import "layout.css";

body {
  font-family: Arial, sans-serif;
}

✅ 2. Faida za @import

• Hugawanya code kwa urahisi: Unaweza kupanga CSS yako katika sehemu tofauti kwa kazi tofauti.

• Inarahisisha matengenezo: Ukibadilisha rangi kwenye colors.css, zitabadilika kote.

• Huwezesha reuse: Faili moja linaweza kutumika sehemu nyingi.

✅ 3. Hasara na Tahadhari

• Performance duni: @import inaweza kuchelewesha upakiaji wa tovuti kwa sababu browsers husubiri faili moja lipakie kabla ya kulifuatia jingine.

• Inapaswa kuwa juu kabisa: Ikiandikwa katikati ya CSS zako, haitafanya kazi.

• Inatambulika polepole na baadhi ya browsers kongwe.

✅ 4. Tofauti kati ya @import na <link>

✅ 5. Ushauri Bora wa Matumizi

• Tumia @import unapojifunza au kwa miradi midogo.

• Kwa miradi mikubwa au ya production, tumia <link> ndani ya HTML ili kuboresha kasi ya upakiaji.

• Epuka kutumia @import ndani ya faili nyingi mfululizo (nested imports), huongeza mzigo kwa browser.

✅ Hitimisho

@import ni chombo kizuri katika CSS kinachokuwezesha kugawanya na kuunganisha mafaili kwa urahisi. Hata hivyo, ni muhimu kujua mipaka yake na athari zake kwenye performance. Katika miradi mikubwa, njia ya <link> ndani ya HTML bado ni bora zaidi kwa kasi na ufanisi.

? Maswali ya Kujitathmini

1. @import hutumiwa kufanya nini?
   a) Kufuta CSS
   b) Kuingiza faili la CSS jingine
   c) Kuongeza picha
   d) Kuweka JavaScript

2. Wapi @import inapaswa kuandikwa katika faili la CSS?
   a) Chini kabisa
   b) Kati ya styles
   c) Juu kabisa kabla ya CSS nyingine
   d) Haijalishi

3. Je, @import ina athari gani kwa performance?
   a) Huharakisha loading
   b) Hakuna tofauti
   c) Hupunguza performance
   d) Hufanya CSS isifanye kazi

4. Tofauti kuu kati ya @import na <link> ni ipi?
   a) Moja ni kwa JavaScript
   b) Moja ni haraka zaidi na haina delay
   c) Zote ni sawa
   d) Hakuna tofauti

5. Ni ipi kati ya hizi si faida ya @import?
   a) Kurahisisha usimamizi
   b) Kuweka code kwa utaratibu
   c) Kuwasha JavaScript
   d) Kuunda modular CSS