Best Practices

የTailwind CSS ልምዶች እና መመሪያዎች

የTailwind CSS የተሻለ ልምዶች፣ ምክሮች እና የኮድ ቅርጸ-ጽሁፍ ልምዶቼ።

Amharic

ሰላም! Tailwind CSS አጥነቅቃችሁ ተጠቃሚ ሆናችኋል ወይስ ልትጀምሩ ትፈልጋላችሁ? በትክክል ቦታ መጣችሁ። ስለ Tailwind CSS አስፈላጊ ነጥቦች እና ምክሮች እካፈላለሁ።

ትክክለኛ በሆነ ቃል “best practices” ብሎ አይጠራም፤ የኮድ ቅርጸ‑ጽሁፍ እና የሥራ ልምዶች ናቸው የሚረዱት፣ እኔን በTailwind CSS ላይ የሚያሳድጉ።

አንዳንድ ጊዜ የግል አመለካከት ይሆናል፣ ግን ተጠቃሚ የሆኑ ነጥቦች እንዳሉ ተስፋ አደርጋለሁ።

የኮድ ቅርጸ-ጽሁፍ (Coding Style)

እዚህ የTailwind CSS ክላሶችን ሲፃፉ እኔ ብዙ ጊዜ የምጠቀምባቸው የኮድ ቅርጸ‑ጽሁፎች ናቸው፤ በ3 ነጥቦች ይከፈላሉ፦ ማደራጃ (sorting)፣ መክፈል (splitting) እና መቡካት (grouping)।

ማደራጃ (Sorting)

በመጀመሪያ የButton ኮምፖነንት ይመልከቱ፤ ክላሶቹ ብዙ ናቸው 😂

<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  Button Text
</button>
HTML
UTF-8

አንድ ኤለመንት ላይ ብዙ ክላሶች ስንጠቀም፣ ቅደም‑ተከተል ማድረግ እጅግ አስፈላጊ ነው።

ደንብ የሚሆነው ነገር፣ Tailwind CSS ይህን ለማስተካከል የPrettier Tailwind ፕለጊን ይሰጣል።

የክላሶች ቅደም‑ተከተል ተመጣጣኝ መሆኑ ለማሻሻያ ቀላል ያደርገዋል።

ለምሳሌ፣ ክላሶቹ እንደ border እና border-transparent በአቅራቢያ ሲሆኑ መቀየር ቀላል ይሆናል።

እንዲሁም hover: ወይም breakpoints እንደሚመጡ በመጨረሻ ክፍል ስለሚኖሩ መቀየር ይቀላል።

መክፈል (Splitting)

ለማሳደግ ክላሶቹን ወደ ብዙ መስመሮች መክፈል ይቻላል (ረጅም እንዳይመስል)። እኔ ብዙ ጊዜ clsx እጠቀማለሁ።

የclsx የሚጠቀም የButton ኮምፖነንት ምሳሌ፦

function Button({ children }) {
  return (
    <button
      className={clsx(
        'inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl',
        'dark:bg-purple-600 dark:hover:bg-purple-500'
      )}
    >
      {children}
    </button>
  );
}
JavaScript React
UTF-8

መቡካት (Grouping)

ክላሶቹን ካፈለን በኋላ በቡድን ማድረግ ይቻላል እና ማንበብ ይቀላል።

ብዙ ጊዜ የምተግበረው ንድፍ ይህ ነው፦

  • group 1: ነባር utilities
  • group 2: የbreakpoints utilities
  • group 3: የdark mode utilities
  • group 4: ሌሎች ዝርያዎች utilities

ይህን በከዚያው Button ኮምፖነንት እንተግበራለን፦

function Button({ children }) {
  return (
    <button
      className={clsx(
        // group 1
        'inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150',
        // group 2
        'md:rounded-xl',
        // group 3
        'dark:bg-purple-600 dark:hover:bg-purple-500',
        // group 4
        'hover:bg-purple-700'
      )}
    >
      {children}
    </button>
  );
}
JavaScript React
UTF-8

ከCSS ኮምፖነንት ጋር ተመሳሳይ፦

.button {
  /* group 1 */
  @apply inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150;
  /* group 2 */
  @apply md:rounded-xl;
  /* group 3 */
  @apply dark:bg-purple-600 dark:hover:bg-purple-500;
  /* group 4 */
  @apply hover:bg-purple-700;
}
CSS
UTF-8

Group 2፣ 3 እና 4 በፈለጉት መልኩ መሻሻል ይችላሉ፤ ግን በሁሉም መጻፍ ውስጥ ተመጣጣኝነት እንዲኖር ያረጋግጡ።

ምክሮች

ኮምፖነንት ይጠቀሙ

አንዳንድ ኤለመንቶች ተመሳሳይ ስታይል ካላቸው ወደ እግር ኮምፖነንት መክፈል ይረዳል (ለምሳሌ ባቶን)።

ስለሆነ እኔ የReact ስር እንዲህ ኮምፖነንት ማዘጋጀት እችላለሁ፦

function Button({ children }) {
  return (
    <button
      className={clsx(
        'inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150',
        'md:rounded-xl',
        'dark:bg-purple-600 dark:hover:bg-purple-500',
        'hover:bg-purple-700'
      )}
    >
      {children}
    </button>
  );
}
TypeScript React
UTF-8

የክፍል ኮምፖነንት ይጠቀሙ

ከኮምፖነንት ጋር ተመሳሳይ ነው፣ ግን ይህ ዘዴ የHTML መጠን/ውጤት ለማሻሻል ይጠቅማል፣ በተለይ ለstatic site።

ብዙ የTailwind ክላሶች መኖራቸው በHTML ላይ ጭነት ይጨምራሉ።

የቀላል ምሳሌ ይመልከቱ፣ በሚቀጥለው የpagination ባቶኖች ላይ ተመሳሳይ የutility ስብስብ እንጠቀማለን፦

<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  Previous
</button>
<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  1
</button>
<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  2
</button>
<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  3
</button>
<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  4
</button>
<button
  class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-transparent bg-purple-600 px-4 text-center text-sm font-bold text-white transition duration-150 hover:bg-purple-700 md:rounded-xl dark:bg-purple-600 dark:hover:bg-purple-500"
>
  Next
</button>

በአንድ HTML ፋይል ውስጥ ብዙ pagination ካለ መጠኑ ይጨምራል ብለው ያስቡ።

የHTML መጠንን ለመቀነስ ወደ class component መቀየር ይቻላል፤ ምሳሌው እንዲህ ነው፦

<button class="pagination-button">Previous</button>
<button class="pagination-button">1</button>
<button class="pagination-button">2</button>
<button class="pagination-button">3</button>
<button class="pagination-button">4</button>
<button class="pagination-button">Next</button>

ይህን ነገር እዚህ አስቀድሜ ተነስቼ አስረድቻለሁ (ነጥብ "በHTML ላይ ጭነት መጨመር").

የ !important መጠቀም

እንደ መደበኛው CSS በእርስዎ !important አጠቃቀምን በቻሉ መጠን ያስወግዱ።

በTailwind CSS ውስጥ !important ለመጠቀም በutility class ፊት ለፊት ! ይጨምራሉ፣ ምሳ. !p-2 !px-3።

በቻሉ መጠን ይቆጠቡ። ከጀመሩ በኋላ ሁሉም utilities ከ!important ጋር ሊያበቃ ይችላል እና ቀጣይ ለውጦች ለማድረግ ከባድ ይሆናል።

የሁኔታ ክፍል (Conditional Class)

Don't
<div className={`text-black ${dark && 'text-white'}`}>
  Hello, World!
</div>
Do
<div className={dark ? 'text-white' : 'text-black'}>
  Hello, World!
</div>

እንድትገቡ ትንሽ እመለከታለሁ።

እንደ መጀመሪያው መንገድ ካደረግን እና dark እሴቱ true ከሆነ፣ ክላሱ እንዲህ ይሆናል text-black text-white።

በአንዳንድ ጉዳዮች ውስጥ ውጤቱ እንደሚፈልጉት ሊሆን ይችላል፣ ግን በሌሎች ጉዳዮች ውስጥ ችግኝ ሊፈጥር ይችላል።

ሊሆን ይችላል ጽሑፉ ጥቁር እንዲቀመጥ ቢሆንም dark እሴት ቢሆን true።

ለምን? ኮዱ ይናገር፦

<!-- Some elements within the project. -->

<div class="text-white">White!</div>
<div class="text-black">Black!</div>

<!-- 
  The above elements will generate CSS in the following order:

  .text-white {
    ...
  }
  .text-black {
    ...
  }
-->

<!--
  Imagine that "dark" is set to true, and use a class defined as follows for conditional class:
      class={`text-black ${dark && 'text-white'}`}
-->
<div class="text-black text-white">Still black? CSS Specificity!</div>

<!-- 
  That's because, in this example, both "text-black" and "text-white" have the same CSS properties and specificity.
  
  On the other hand, the last one defined in the CSS file (in the previously generated CSS) will take precedence!
-->
HTML
UTF-8

Tailwind Play

Posted ontailwindcsswith tags:
#tailwindcss#best-practices
0
0
0
0