என் Best Practices – CSS

1. முன்னுரை

இன்று CSS போதுமான அளவு பயன்படுத்தப்படுவதில்லை. Angular/React/Vue/... developer-களுக்கும் UI designer-களுக்கும் இடையே ஒரு பெரிய இடைவெளி இருக்கிறது.

UI designer முப்பது <div>-களை ஒன்றுக்குள் ஒன்றாக அடுக்கி, அவற்றின் மேல் நாற்பது CSS class-களைப் போடுகிறார்; இதற்கிடையில் Angular dev இரண்டு வாரத்துக்கு ஒருமுறை புதிய lib-ஐப் பார்த்துப் பரவசமடைகிறார், ஆனால் அவருடைய Dependency Hell, peer dependency-கள் மோதிக்கொள்வதால் நீண்ட காலமாகவே npm i --force இல்லாமல் build ஆவதில்லை. TypeScript வெறியருக்கு CSS, HTML பற்றி அவ்வளவு அக்கறை இல்லை. மிக எளிய input-களுக்குக்கூட அவர் Material-ஐப் பயன்படுத்த வேண்டும் – இல்லையென்றால் validation சரியாக வராது என்ற பயம். சக்கரத்தை மீண்டும் கண்டுபிடித்து நேரத்தை வீணாக்கவும் யாரும் விரும்புவதில்லை. ஆனால் library ஆதரிக்காத முதல் தேவை வந்ததுமே மிச்சப்படுத்திய நேரம் முழுவதும் மீண்டும் வீணாகும், தானே அந்த lib-இன் GitHub issue-களைப் படித்துக்கொண்டிருப்பார் என்பது அவருக்குப் புரிவதில்லை.

Fullstack project-இல் ஒரு developer-ஆக, frontend design திறமைகளை வெளிப்படுத்த வாய்ப்பு அரிதாகவே கிடைக்கும். Figma-வில் screen mockup-கள் வரும்; அவற்றை அப்படியே உருவாக்க வேண்டும். இந்த வகை frontend developer-களில் பெரும்பாலோருக்கு, ஒரே ஒரு வரி CSS-இலேயே ஒரு responsive layout-ஐ உருவாக்க முடியும் என்பதே தெரியாது. CSS முன்னெப்போதையும் விட வலிமையாக இருக்கிறது. JS style hack-கள், எண்ணற்ற media query-கள், IE 8 workaround-கள் ஆகியவற்றின் காலம் முடிந்துவிட்டது. ஹுர்ரே!

2. சரியாக நடுவில்

Interview-களில் எப்போதும் வரவேற்பைப் பெறவில்லை, ஆனால் எனக்கு மிகவும் பிடிக்கும்: frontend-இல் நான் திறமையானவனா என்ற கேள்விக்கு அடிக்கடி இப்படிப் பதில் சொல்வேன் – “ஓ, ஆமாம். என்னால் ஒரு <div>-ஐ செங்குத்தாக நடுவில் வைக்க முடியும்.”

ஒரு div-ஐ நடுவில் வைப்பது பெயர்போன கடினமான வேலை.

இனி அப்படியில்லை:

.parent {
    display: grid;
    place-items: center
}

3. Responsive Grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive Flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. பக்க layout

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. பக்கப்பட்டி (Sidebar)

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. நன்றி

1-Line Layouts