CSS அழகுபடுத்துதல் எவ்வாறு செயல்படுகிறது
அழகுபடுத்தி உங்கள் stylesheet-ஐ எழுத்தெழுத்தாக வாசிக்கிறது, ஒவ்வொரு block எவ்வளவு ஆழமாக nested என்று கண்காணிக்கிறது, மற்றும் சீரான இடைவெளியுடன் மீண்டும் வெளியிடுகிறது. styles என்ன செய்கின்றன என்பது ஒருபோதும் மாறாது — அவை ஃபைலில் எப்படி தெரிகின்றன மட்டுமே மாறுகிறது.
- டோக்கனைஸ். library உங்கள் உள்ளீட்டை tokens நீரோட்டமாக scan செய்கிறது: selectors, property பெயர்கள், values, at-rules, comments மற்றும் braces, colons, semicolons. Strings மற்றும் url() values ஒற்றை அலகுகளாக அங்கீகரிக்கப்படுகின்றன, எனவே content property-க்குள் உள்ள brace-ஐ block delimiter என்று தவறாக எடுக்க முடியாது.
- உள்ளமைவு கண்காணிப்பு. token நீரோட்டத்தில் நடக்கும்போது, அழகுபடுத்தி ஒரு நடப்பு உள்தள்ளல் நிலையை வைத்திருக்கிறது. ஒவ்வொரு திறக்கும் brace நிலையை ஆழமாக்குகிறது — rule block ஆனாலும், media query ஆனாலும், keyframes block ஆனாலும் — ஒவ்வொரு மூடும் brace அதை மீண்டும் pop செய்கிறது. அந்த ஆழம் திரும்பப் பெறும் ஒவ்வொரு வரியின் முன்னால் எத்தனை உள்தள்ளல் அலகுகள் இருக்கும் என்று தீர்மானிக்கிறது.
- உங்கள் விருப்பங்களை பயன்படுத்துங்கள். உங்கள் உள்தள்ளல் தேர்வு (2 இடைவெளிகள், 4 இடைவெளிகள், அல்லது tab) ஒரு நிலையின் அகலத்தை அமைக்கிறது. Brace-style அமைப்பு திறக்கும் brace selector-ஐ பின்தொடர்ந்து வருமா அல்லது சொந்த வரியில் இறங்குமா என்பதை தீர்மானிக்கிறது. மீதமுள்ள toggles rule blocks-க்கிடையே வெற்று வரி சேர்க்கின்றன மற்றும் h1, h2, h3 போன்ற குழுவான selectors-ஐ தனித்தனி வரிகளில் பிரிக்கின்றன.
- மீண்டும் வெளியிடுதல். இறுதியில் formatter நிர்ணயிக்கப்பட்ட உள்தள்ளல் மற்றும் வரி முறிவுகளுடன் tokens-ஐ மீண்டும் print செய்கிறது, வரிக்கு ஒரு declaration மற்றும் ஒவ்வொரு colon-க்கும் பிறகு ஒரு இடைவெளி வைக்கிறது. முடிவு அதே stylesheet, ஒரு மனிதன் cascade-ஐ படித்து scan செய்யக்கூடிய வகையில் அமைக்கப்பட்டது.
CSS-ஐ ஏன் அழகுபடுத்த வேண்டும்
- மினிஃபை செய்யப்பட்ட stylesheets வாசிக்கவும். Production CSS விதிகளுக்கிடையே எந்த இடைவெளியும் இல்லாமல் ஒரே வரியில் ship ஆகிறது. அழகுபடுத்துதல் வரி முறிவுகள் மற்றும் உள்தள்ளலை மீட்டெடுக்கிறது, source map இல்லாமலும் layout bug-ன் பின்னுள்ள selector-ஐ கண்டுபிடிக்கலாம்.
- சீரற்ற கோப்புகளை ஒழுங்குபடுத்தவும். பலர் தொட்ட stylesheet கலந்த உள்தள்ளல் மற்றும் brace styles-க்கு நகர்கிறது. அழகுபடுத்தி வழியாக ஒரு pass முழு கோப்பையும் ஒரே layout-க்கு normalize செய்கிறது, அடுத்த diff whitespace noise-க்கு பதிலாக உண்மையான cascade மாற்றங்களை காண்பிக்கும்.
- இந்தக் கருவி உங்கள் பக்கத்தை மெதுவாக்காது. பெரும்பாலான ஆன்லைன் formatters பக்கம் திறக்கும்போதே முழு library-ஐ load செய்கின்றன. இந்தக் கருவி js-beautify-ஐ நீங்கள் Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை ஆன் செய்யும்போது மட்டுமே lazy-load செய்கிறது, எனவே பக்கம் திறக்க சில நூறு kilobytes-க்கு பதிலாக சில kilobytes மட்டுமே தேவை.
- எதுவும் உங்கள் உலாவியை விட்டு வெளியே செல்வதில்லை. அழகுபடுத்தி முழுவதும் உங்கள் சாதனத்தில் இயங்குகிறது. உங்கள் CSS எப்போதும் server-க்கு பதிவேற்றம் ஆவதில்லை, இது குறிப்பாக நீங்கள் பரிசோதிக்கும் stylesheet ஒரு client-க்கு சொந்தமானதாக இருந்தால், உள்ளக class பெயர்கள் இருந்தால், அல்லது இரகசியத்தன்மை ஒப்பந்தத்தின் கீழ் இருந்தால் முக்கியமானது.
பொதுவான பயன்பாடுகள்
CSS-ஐ அழகுபடுத்துவது தேவைப்படுவது யாரேனும் படிக்கும் நோக்கத்திற்காக எழுதப்படாத stylesheet-ஐ படிக்க வேண்டியிருக்கும்போது.
- Production பிழைதிருத்தம்: Network tab-ல் இருந்து எடுத்த மினிஃபை செய்யப்பட்ட stylesheet-ஐ ஒட்டி, உங்கள் எதிர்பார்த்த layout-ஐ override செய்யும் விதியை கண்டுபிடியுங்கள்.
- Code review தயாரிப்பு: pull request திறப்பதற்கு முன்பு contributor-ன் சீரற்று உள்தள்ளப்பட்ட stylesheet-ஐ reformat செய்யுங்கள், reviewers whitespace மாற்றங்களுக்கு பதிலாக cascade பாருவார்கள்.
- கற்றல் மற்றும் தணிக்கை: framework அல்லது component-library stylesheet-ஐ விரிவாக்கி அதன் selectors, media queries மற்றும் custom properties எவ்வாறு கட்டமைக்கப்பட்டிருக்கின்றன என்று ஆய்வு செய்யுங்கள்.
ஒரு விளக்க உதாரணம்
ஒரு மினிஃபை செய்யப்பட்ட ஒரே வரியை எடுங்கள்: a{color:red;margin:0}b{padding:0}. 2 இடைவெளிகள் உள்தள்ளல் மற்றும் Collapse brace style-உடன் மேலே ஒட்டி Beautify கிளிக் செய்யுங்கள். படிக்கக்கூடிய blocks திரும்பிவருகிறது: a { சொந்த வரியில், color: red; மற்றும் margin: 0; declarations ஒரு நிலை ஆழமாக உள்தள்ளப்பட்டு, closing brace selector-க்கு கீழ் aligned, மற்றும் b விதி கீழே. Brace style-ஐ Expand-க்கு மாற்றினால் ஒவ்வொரு திறக்கும் brace சொந்த வரியில் வருகிறது. Indentation-ஐ Tabs-க்கு மாற்றினால் ஒவ்வொரு நிலையும் இரண்டு இடைவெளிகளில் இருந்து tab character-க்கு மாறுகிறது. Styles அப்படியே; layout மட்டும் மாறுகிறது.
FAQ
இது என் உலாவியில் இயங்குகிறதா?
ஆம். js-beautify library முதல் முறை Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை enable செய்யும்போது lazy-load ஆகிறது, பின்னர் cache ஆகிறது. உங்கள் CSS பக்கத்தை விட்டு வெளியே செல்வதே இல்லை — server round-trip இல்லை, பதிவேற்றம் இல்லை.
அழகுபடுத்துவது un-minifying-க்கு சமானமா?
இது படிக்கக்கூடிய formatting-ஐ மீட்டெடுக்கிறது — உள்தள்ளல், வரி முறிவுகள் மற்றும் இடைவெளி — ஆனால் மினிஃபிகேஷன் நீக்கிய comments அல்லது ஃபைலில் எப்போதும் இல்லாத structure-ஐ திரும்பக் கொண்டுவர முடியாது. இது உள்ள declarations மற்றும் selectors-ஐ மட்டுமே reformat செய்கிறது.
அழகுபடுத்துவது என் styles-ன் rendering-ஐ மாற்றுமா?
இல்லை. அழகுபடுத்துதல் வெற்று இடங்கள் மற்றும் வரி முறிவுகளை மட்டும் சேர்க்கிறது அல்லது நீக்குகிறது; cascade தொடரப்படவில்லை மற்றும் பக்கம் ஒரே மாதிரியாக render ஆகிறது. Property order, specificity மற்றும் values நீங்கள் எழுதியது போலவே இருக்கும்.
பிரேஸ்-ஸ்டைல் விருப்பங்களின் பொருள் என்ன?
Collapse திறக்கும் brace-ஐ selector-ன் அதே வரியில் வைக்கிறது (a {), இது சாதாரண CSS convention. Expand ஒவ்வொரு திறக்கும் brace-ஐ selector-க்கு கீழ் சொந்த வரியில் வைக்கிறது. வெற்று-வரி மற்றும் ஒன்று-selector-ஒரு-வரி toggles rule blocks-க்கிடையே இடைவெளி மற்றும் h1, h2, h3 போன்ற குழுவான selectors-ன் layout-ஐ கட்டுப்படுத்துகிறது.
Browser-side CSS அழகுபடுத்துதல் build step அல்லது பதிவேற்றம் இல்லாமல் படிக்கக்கூடிய stylesheet வழங்குகிறது. மினிஃபை செய்யப்பட்ட அல்லது ஒழுங்கற்ற ஃபைலை ஒட்டுங்கள், உங்கள் உள்தள்ளல் மற்றும் brace style தேர்ந்தெடுங்கள், பின்னர் முடிவை நகலெடுங்கள் அல்லது பதிவிறக்குங்கள். எதுவும் உங்கள் சாதனத்தை விட்டு வெளியேறுவதில்லை, கணக்கு தேவையில்லை, library நீங்கள் கேட்கும்போது மட்டுமே load ஆகிறது — எனவே இந்தப் பக்கம் திறப்பதால் megabyte அல்ல, சில kilobytes மட்டுமே செலவாகும்.