ReactJS Styling Techniques: CSS Modules, Styled-Components | Sinhala Guide

කට්ටියම දන්නවානේ React වලින් User Interface (UI) එකක් හදනකොට ඒකේ functionality එක වගේම look & feel එකත් කොච්චර වැදගත්ද කියලා. අපි කොච්චර හොඳට components හැදුවත්, ඒවට ලස්සන පෙනුමක් නැත්නම් user experience එක අඩුයිනේ. අද කාලේ ලස්සන, user-friendly applications නැතුව වැඩක් නෑ කියලත් කියන්න පුළුවන්.

ඉතින් මේ tutorial එකෙන් අපි බලමු React Components වලට styles දාන්න තියෙන විවිධ ක්‍රම මොනවද කියලා. අපි මේ ටික ගැන විස්තරාත්මකව කතා කරනවා:

• Inline Styles
• External CSS Stylesheets (සාම්ප්‍රදායික CSS)
• CSS Modules
• Styled-Components (CSS-in-JS ක්‍රමවේදයක්)

මේ හැම ක්‍රමයකම තියෙන හොඳ නරක (pros and cons) ගැනත්, ප්‍රායෝගික උදාහරණ (practical examples) එක්ක අපි බලමු. මේක ඉගෙනගත්තම ඔයාලට පුළුවන් React project එකක styles organize කරගන්න හොඳම ක්‍රමය තෝරගන්න. එහෙනම් අපි පටන් ගමු!

Styling Methods: විවිධ ක්‍රමවේදයන්

React Components වලට styles දාන්න ප්‍රධාන ක්‍රම කීපයක්ම තියෙනවා. ඒ හැම එකකටම එයාලගේම වාසි සහ අවාසි තියෙනවා. අපි එකින් එක බලමු.

1. Inline Styles

මේක තමයි React Components වලට styles දාන්න තියෙන ලේසිම වගේම මූලිකම ක්‍රමය. අපි styles ලියන්නේ style prop එක ඇතුලෙම, JavaScript object එකක් විදිහට. මේක HTML වල තියෙන style attribute එකට සමානයි, නමුත් JavaScript object එකක් විදිහට styles ලියන නිසා camelCase වලින් properties ලියන්න ඕනේ (උදා: background-color වෙනුවට backgroundColor).

වාසි (Pros):

• Component Specificity: Styles apply වෙන්නේ අදාළ component එකට විතරයි. මේක නිසා වෙනත් component එකක style එකකට බලපෑමක් වෙන්නේ නැහැ.
• No Naming Conflicts: Class names ගැන හිතන්න ඕනේ නැහැ, මොකද Global CSS එකකට බලපෑමක් නැති නිසා.
• Dynamic Styling: JavaScript variables සහ props පාවිච්චි කරලා පහසුවෙන් dynamic styles apply කරන්න පුළුවන්.

අවාසි (Cons):

• Not Reusable: එකම style එක components කීපයකට අවශ්‍ය වුණොත්, හැම තැනම නැවත නැවත ලියන්න වෙනවා. Code duplication වැඩි වෙනවා.
• Limited Features: :hover වගේ pseudo-selectors, media queries, keyframe animations වගේ දේවල් inline styles වලින් කරන්න බෑ.
• Readability: Complex styles set එකක් නම් code එක කියවන්න අමාරු වෙන්න පුළුවන්.

උදාහරණය (Example):

අපි බලමු Inline Styles පාවිච්චි කරලා Button එකක් හදාගන්නේ කොහොමද කියලා.

function InlineStyledButton() {
  const buttonStyle = {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    fontSize: '16px',
    fontWeight: 'bold'
  };

  return (
    <button style={buttonStyle}>
      Inline Styled Button
    </button>
  );
}

export default InlineStyledButton;

2. External CSS Stylesheets

මේක තමයි අපි සාමාන්‍යයෙන් වෙබ් development වලට පාවිච්චි කරන සාම්ප්‍රදායික ක්‍රමය. වෙනම .css file එකක් හදලා ඒක අපේ React Component එකට import කරනවා. මේකෙදි අපිට CSS classes, IDs, සහ element selectors පාවිච්චි කරන්න පුළුවන්.

වාසි (Pros):

• Familiarity: CSS ගැන දන්න ඕනෙම කෙනෙක්ට මේක පහසුවෙන් තේරුම් ගන්න පුළුවන්.
• Full CSS Power: Pseudo-selectors, media queries, animations වගේ හැම CSS feature එකක්ම පාවිච්චි කරන්න පුළුවන්.
• Reusability: CSS classes මගින් styles පහසුවෙන් reusable කරන්න පුළුවන්.
• Separation of Concerns: Styles වෙනම file එකක තියෙන නිසා code එක clean වෙනවා.

අවාසි (Cons):

• Global Scope: මේක තමයි මේ ක්‍රමයේ තියෙන ප්‍රධානම ගැටලුව. CSS styles globally apply වෙන නිසා, එකම class name එකක් project එකේ තැන් දෙකක පාවිච්චි කළොත් style conflicts (ගැටුම්) ඇති වෙන්න පුළුවන්. Specificity issues (කුමන style එක apply විය යුතුද යන්න) ඇති වෙන්නත් පුළුවන්.
• No Component Scoping by Default: Components වලට styles locally apply කරන්න බැරි වීම.

උදාහරණය (Example):

මුලින්ම අපි Button.css කියලා file එකක් හදමු.

/* Button.css */
.myButton {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.myButton:hover {
  background-color: #218838;
}

.secondaryButton {
  background-color: #6c757d;
}

.secondaryButton:hover {
  background-color: #5a6268;
}

දැන් අපි මේ CSS styles React Component එකකට import කරලා පාවිච්චි කරමු.

import React from 'react';
import './Button.css'; // CSS file එක import කරනවා

function ExternalStyledButtons() {
  return (
    <div>
      <button className="myButton">
        Primary External CSS Button
      </button>
      <button className="myButton secondaryButton">
        Secondary External CSS Button
      </button>
    </div>
  );
}

export default ExternalStyledButtons;

3. CSS Modules

External CSS වල තිබුණ class name collisions (class නම් ගැටුම්) ප්‍රශ්නයට හොඳම විසඳුමක් තමයි CSS Modules කියන්නේ. මේකෙන් .css file එකේ තියෙන class names unique විදිහට generate කරනවා, ඒක globally scope වෙන්නේ නැතිව අදාළ component එකට විතරක් local scope වෙන විදිහට. [name].module.css කියන naming convention එක පාවිච්චි කරනවා.

වාසි (Pros):

• Local Scope by Default: හැම class name එකක්ම locally scope වෙන නිසා global conflicts ඇති වෙන්නේ නැහැ. උදාහරණයක් විදිහට .button කියලා class එකක් හැදුවොත්, CSS Module එකෙන් ඒක Button_button__xyz123 වගේ unique නමක් බවට පත් කරනවා.
• No Class Name Collisions: මේක තමයි මේ ක්‍රමයේ තියෙන ලොකුම වාසිය. Naming conventions ගැන ගොඩක් හිතන්න ඕනේ නැහැ.
• Still Uses Standard CSS: සාමාන්‍ය CSS syntax එකම පාවිච්චි කරන්න පුළුවන්.

අවාසි (Cons):

• Syntax is Different: Styles import කරලා JavaScript object එකක් විදිහට පාවිච්චි කරන්න වෙනවා.
• No Global Styles by Default: සමහර වෙලාවට global styles අවශ්‍ය වුණොත් වෙනම import කරගන්න වෙනවා.

උදාහරණය (Example):

මුලින්ම අපි ModuleButton.module.css කියලා file එකක් හදමු.

/* ModuleButton.module.css */
.primaryButton {
  background-color: #ffc107; /* Yellow */
  color: black;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.primaryButton:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.successButton {
  background-color: #20c997; /* Teal */
  color: white;
}

.successButton:hover {
  filter: brightness(0.9);
}

දැන් අපි මේ CSS Module එක React Component එකකට import කරලා පාවිච්චි කරමු.

import React from 'react';
import styles from './ModuleButton.module.css'; // styles object එකක් විදිහට import කරනවා

function ModuleStyledButtons() {
  return (
    <div>
      <button className={styles.primaryButton}>
        CSS Module Primary Button
      </button>
      <button className={`${styles.primaryButton} ${styles.successButton}`}>
        CSS Module Success Button
      </button>
    </div>
  );
}

export default ModuleStyledButtons;

මෙහිදී styles.primaryButton ලෙස class name එකට access කරන ආකාරය ඉතා වැදගත්.

4. Styled-Components (CSS-in-JS)

මේක 'CSS-in-JS' approach එකකට උදාහරණයක්. Styled-Components වගේ library එකකින් styles ලියන්නේ JavaScript code එක ඇතුලෙමයි, backticks (``) පාවිච්චි කරලා. මේක component-oriented styling වලට හරිම හොඳ විසඳුමක්.

වාසි (Pros):

• Truly Component-Scoped: styles component එකටම අයිතියි. වෙන component එකකට බලපෑමක් නෑ.
• Dynamic Styling: JavaScript props වලට අනුව styles පහසුවෙන් වෙනස් කරන්න පුළුවන්.
• Better Developer Experience (DX): Design Systems හදනකොට, හෝ UI library එකක් හදනකොට මේක ගොඩක් පහසුයි.
• Automatic Vendor Prefixing: Browsers වලට අවශ්‍ය prefixes automatically add කරනවා.
• Easy Maintenance: Component එකේ logic සහ styles එකටම තියෙන නිසා maintain කරන්න පහසුයි.

අවාසි (Cons):

• Adds a Library Dependency: Project එකට අමතර library එකක් install කරන්න වෙනවා.
• Learning Curve: මුලින් ටිකක් ඉගෙන ගන්න වෙනවා.
• Bundle Size: Project එකේ bundle size එකට පොඩි බලපෑමක් වෙන්න පුළුවන්.
• Performance (sometimes): ඉතා විශාල project වලදී runtime එකේදී styles generate කරන නිසා සුළු performance impact එකක් ඇති වෙන්න පුළුවන්. (නමුත් බොහෝ project වලදී මේක ගැටලුවක් නොවේ).

උදාහරණය (Example):

මුලින්ම styled-components library එක install කරගන්න:

npm install styled-components
# or
yarn add styled-components

දැන් අපි Styled-Components පාවිච්චි කරලා Button එකක් හදමු.

import React from 'react';
import styled from 'styled-components';

// Styled component එකක් හදනවා
const StyledButton = styled.button`
  background-color: ${(props) => (props.primary ? '#17a2b8' : '#6c757d')}; /* Teal or Gray */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  margin: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;

  &:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
`;

function StyledComponentButtons() {
  return (
    <div>
      <StyledButton primary>Primary Styled Button</StyledButton>
      <StyledButton>Default Styled Button</StyledButton>
    </div>
  );
}

export default StyledComponentButtons;

මෙහිදී props වලට අනුව background-color එක වෙනස් කරන හැටි බලන්න. මේක dynamic styling වලට හොඳ උදාහරණයක්.

Which Method to Choose? හොඳම ක්‍රමය මොකද්ද?

ඉතින් යාලුවනේ, මේ හැම ක්‍රමයක්ම හොඳයි. ඒත් ඔයාලගේ project එකේ ස්වභාවය, කණ්ඩායමේ කැමැත්ත, සහ project එකේ පරිමාණය අනුවයි අපි හොඳම ක්‍රමය තෝරගන්න ඕනේ.

• Inline Styles: මේවා පුංචි, එක පාරක් විතරක් පාවිච්චි කරන styles වලට (උදා: dynamically position වෙන element එකක් වගේ). ගොඩක් වෙලාවට මේවා පාවිච්චි කරන්නේ නැහැ.
• External CSS Stylesheets: සාම්ප්‍රදායික CSS ගැන හොඳට දන්න කණ්ඩායම් වලට, නැත්නම් පුංචි project වලට මේවා හොඳයි. නමුත් class name conflicts සහ specificity issues ගැන ගොඩක් සැලකිලිමත් වෙන්න ඕනේ. Global styles වලටත් මේවා පාවිච්චි කරන්න පුළුවන්.
• CSS Modules: විශාල project වල components වලට specific styles දාන්න හොඳම ක්‍රමය. මේකෙන් class name conflicts ඇති වෙන එක සම්පූර්ණයෙන්ම වළක්වනවා. සාමාන්‍ය CSS syntax එකම තියාගෙනම component-level scoping ලබාගන්න පුළුවන්.
• Styled-Components (or Emotion): Design Systems හදනකොට, තනිකරම Component-based styles අවශ්‍ය නම්, dynamic styles ගොඩක් තියෙනවා නම් මේවා ගොඩක් ප්‍රයෝජනවත්. විශේෂයෙන්ම UI components හදන project වලට මෙය ඉතාම සුදුසුයි.

බොහෝ විට, CSS Modules හෝ Styled-Components වැනි CSS-in-JS library එකක් පාවිච්චි කරන එක තමයි React Ecosystem එකේ best practice එක විදිහට සලකන්නේ, විශේෂයෙන්ම මධ්‍යම ප්‍රමාණයේ සහ විශාල project වලට.

Best Practices and Common Issues: වැදගත් දේවල් සහ ප්‍රශ්න

Styles කරනකොට අපිට මුහුණ දෙන්න වෙන පොදු ගැටලු සහ ඒවා මඟහරවාගන්න පුළුවන් විදි ගැන කතා කරමු.

• Specificity Issues (External CSS වලදී): External CSS පාවිච්චි කරනකොට, සමහර වෙලාවට අනවශ්‍ය විදිහට styles override වෙන්න පුළුවන්. ඒක CSS specificity නිසා වෙන දෙයක්. උදාහරණයක් විදිහට, .button {} එකකට වඩා #myButton {} එකක style එකකට higher specificity එකක් තියෙනවා. මේවා ගැන අවබෝධයක් තියාගෙන code කරන එක වැදගත්.
• Class Name Collisions (External CSS වලදී): විශේෂයෙන්ම External CSS වල, .button වගේ common class name එකක් project එකේ තැන් කීපයක පාවිච්චි කළොත් එකක් අනික override කරන්න පුළුවන්. CSS Modules වලින් මේක මඟහරවාගන්න පුළුවන් නිසා, පුළුවන් නම් CSS Modules හෝ CSS-in-JS library එකක් පාවිච්චි කරන එක හොඳයි.
• Consistency: Project එකක එකම styling approach එකක් පාවිච්චි කරන එක ගොඩක් වැදගත්. හැමතැනම විවිධ ක්‍රම පාවිච්චි කළොත් code එක maintain කරන්න අමාරු වෙනවා. ඊට අමතරව, naming conventions (උදා: BEM) වගේ දේවල් පාවිච්චි කරන එකත් code එක clean කරගන්න උදව් වෙනවා.
• Reusability: පුළුවන් තරම් reusable styles හදන්න බලන්න. Styled-Components වලදී StyledButton වගේ base component එකක් හදලා ඒක extend කරලා StyledPrimaryButton, StyledSecondaryButton වගේ ඒවා හදන්න පුළුවන්. ඒකෙන් code duplication අඩු වෙනවා.
• Performance: styles optimized කරන එක project එකේ performance එකට බලපානවා. අනවශ්‍ය large CSS files, complex selectors, සහ redundant styles අඩු කරන එක වැදගත්.

Conclusion: Styles වලින් React Components ලස්සන කරමු!

ඉතින් යාලුවනේ, මේ tutorial එකෙන් අපි React Components වලට styles දාන්න පුළුවන් ප්‍රධාන ක්‍රම හතරක් ගැන විස්තරාත්මකව කතා කළා. Inline Styles, External CSS, CSS Modules, සහ Styled-Components කියන මේ හැම ක්‍රමයකටම එයාලගේම වටිනාකමක් තියෙනවා. ඔයාලගේ project එකේ අවශ්‍යතාවය අනුව මේවායින් හොඳම ක්‍රමය තෝරගන්න එක තමයි වැදගත්ම දේ.

Styles වලින් ඔයාලගේ React Components ලස්සන කරලා, user experience එක තවත් වැඩි දියුණු කරන්න මේ දැනුම ගොඩක් වැදගත් වෙයි. අදම මේ ක්‍රම කීපයම ඔයාලගේ React project එකක apply කරලා බලන්න. Practical experience එක තමයි ඕනෑම දෙයක් ඉගෙන ගන්න හොඳම ක්‍රමය.

මේ ගැන ඔයාලගේ අත්දැකීම්, ප්‍රශ්න, අදහස් comment section එකේ කියන්න අමතක කරන්න එපා. ඊලඟ project එකට මේවා apply කරලා බලන්න! Happy Coding!

සැමට ජය!