CSS બ્યૂટિફિકેશન કેવી રીતે કામ કરે છે
બ્યૂટિફાયર તમારી સ્ટાઇલશીટને અક્ષર-દર-અક્ષર વાંચે છે, દરેક બ્લોક કેટલા ઊંડે nested છે તે ટ્રૅક કરે છે, અને તેને સુસંગત spacing સાથે ફરી છાપે છે. તે સ્ટાઇલ શું કરે છે તે ક્યારેય બદલતું નથી — ફક્ત ફાઇલમાં તે કેવું દેખાય છે તે બદલે છે.
- ટોકનાઇઝ કરો. લાઇબ્રેરી તમારા ઇનપુટને token ની એક ધારામાં સ્કૅન કરે છે: selectors, property નામો, values, at-rules, comments, અને એમને અલગ પાડતા કૌંસ, કોલન, અને સેમિકોલન. Strings અને url() values ને એક જ એકમ તરીકે ઓળખવામાં આવે છે, તેથી content property ની અંદરના કૌંસને ક્યારેય block delimiter તરીકે ભૂલથી લેવાતા નથી.
- Nesting ટ્રૅક કરો. જેમ તે token ધારા પર ચાલે છે, બ્યૂટિફાયર એક ચાલુ indent level જાળવી રાખે છે. કોઈ પણ ખુલતો કૌંસ level ને ઊંડે ધકેલે છે, પછી ભલે તે rule block નો હોય, media query નો હોય, કે keyframes block નો, અને દરેક બંધ થતો કૌંસ તેને પાછું પૉપ કરે છે. એ ઊંડાઈ નક્કી કરે છે કે તમને પાછી મળતી દરેક લાઇનની આગળ કેટલા indent એકમ બેસે છે.
- તમારા વિકલ્પો લાગુ કરો. તમારી indent પસંદગી (2 સ્પેસ, 4 સ્પેસ, કે એક ટૅબ) એક level ની પહોળાઈ સેટ કરે છે. કૌંસ-શૈલી સેટિંગ નક્કી કરે છે કે ખુલતો કૌંસ તેની આગળના selector ને વળગી રહે કે પોતાની અલગ લાઇન પર ઊતરે. બાકીના ટૉગલ rule blocks વચ્ચે એક ખાલી લાઇન ઉમેરે છે અને જૂથ થયેલા selectors ને અલગ લાઇનો પર વહેંચે છે.
- ફરી છાપો. છેલ્લે formatter token ને તેણે ગણેલા indentation અને line breaks સાથે પાછા છાપે છે, દરેક લાઇન પર એક declaration અને દરેક કોલન પછી એક જ સ્પેસ મૂકતું. પરિણામ એ જ સ્ટાઇલશીટ છે, એવી રીતે ગોઠવાયેલી કે માણસ cascade સ્કૅન કરી શકે.
CSS કેમ બ્યૂટિફાઈ કરવું
- મિનિફાઈડ સ્ટાઇલશીટ વાંચો. ઉત્પાદન CSS નિયમો વચ્ચે કોઈ spacing વગર એક લાઇન પર મોકલાય છે. બ્યૂટિફાઈ કરવાથી line breaks અને indentation પાછા આવે છે જેથી તમે layout bug પાછળનો selector શોધી શકો અને source map વગર પણ એ બરાબર કયા declarations સેટ કરે છે તે જોઈ શકો.
- અસંગત ફાઇલો વ્યવસ્થિત કરો. જે સ્ટાઇલશીટને ઘણા લોકોએ સ્પર્શ કર્યો હોય તે મિશ્ર indentation અને કૌંસ શૈલીમાં ભટકી જાય છે. બ્યૂટિફાયરમાંથી એક પાસ આખી ફાઇલને એક જ લેઆઉટ પર સામાન્ય બનાવે છે, જેથી આગળનો diff ખાલી જગ્યાના ઘોંઘાટને બદલે અસલી cascade ફેરફારો બતાવે છે.
- આ સાધન તમારા page પર ભાર નથી નાખતું. મોટાભાગના ઓનલાઇન formatters પેજ ખોલતા જ આખી લાઇબ્રેરી લોડ કરે છે. આ ફક્ત ત્યારે js-beautify ને lazy-load કરે છે જ્યારે તમે બ્યૂટિફાઈ ક્લિક કરો અથવા Live mode ચાલુ કરો, જેથી પેજ ખોલવાનો ખર્ચ થોડા સોને બદલે થોડા કિલોબાઇટ થાય છે, અને પ્રારંભિક render ઝડપી રહે છે.
- કંઈ તમારું બ્રાઉઝર છોડતું નથી. બ્યૂટિફાયર સંપૂર્ણપણે તમારા device પર ચાલે છે. તમારી CSS ક્યારેય server પર upload થતી નથી, જે ત્યારે મહત્ત્વનું છે જ્યારે તમે તપાસી રહેલી સ્ટાઇલશીટ કોઈ client ની હોય, આંતરિક class નામો ધરાવતી હોય, કે ગુપ્તતા કરાર હેઠળ આવતી હોય.
સામાન્ય ઉપયોગો
CSS બ્યૂટિફાઈ કરવાનું ત્યારે આવે છે જ્યારે કોઈને એવી સ્ટાઇલશીટ વાંચવી પડે જે વાંચવા માટે લખાઈ ન હતી.
- ઉત્પાદન ડિબગ કરવું: Network ટૅબમાંથી ખેંચેલી મિનિફાઈડ સ્ટાઇલશીટ પેસ્ટ કરો જેથી એ નિયમ મળે જે તમે અપેક્ષેલા layout ને overriding કરી રહ્યો છે.
- કોડ રિવ્યૂની તૈયારી: pull request ખોલતા પહેલાં contributor ની અસંગત-ઇન્ડેન્ટ થયેલી સ્ટાઇલશીટ ફરી ફોર્મેટ કરો જેથી reviewers cascade ફેરફારો જુએ, layout નો વલોણ નહીં.
- શીખવું અને ઓડિટ કરવું: framework કે component-library સ્ટાઇલશીટને expand કરો જેથી તેના selectors, media queries, અને custom properties કેવી રીતે રચાયેલા છે તેનો અભ્યાસ થાય.
એક ઉદાહરણ ઉકેલીને
એક મિનિફાઈડ એક-લાઇન લો: a{color:red;margin:0}b{padding:0}. તેને ઉપર indentation 2 સ્પેસ અને કૌંસ શૈલી Collapse સેટ કરીને પેસ્ટ કરો, પછી બ્યૂટિફાઈ ક્લિક કરો. તમને વાંચી શકાય તેવા block પાછા મળે છે: a { પોતાની અલગ લાઇન પર, color: red; અને margin: 0; declarations દરેક એક level ઊંડે ઇન્ડેન્ટ થયેલા, બંધ થતો કૌંસ selector ની નીચે ગોઠવાયેલો, અને b નિયમ નીચે અનુસરતો. કૌંસ શૈલી Expand પર ફેરવો અને દરેક ખુલતો કૌંસ પોતાની અલગ લાઇન પર ઊતરે છે. indentation ને ટૅબ પર બદલો અને દરેક level બે સ્પેસથી ટૅબ અક્ષર પર ખસે છે. સ્ટાઇલ સરખી જ છે; ફક્ત લેઆઉટ બદલાય છે.
FAQ
શું આ મારા બ્રાઉઝરમાં ચાલે છે?
હા. js-beautify લાઇબ્રેરી પ્રથમ વખત તમે બ્યૂટિફાઈ ક્લિક કરો કે Live mode સક્ષમ કરો ત્યારે lazy-load થાય છે, પછી cache થાય છે. તમારી CSS ક્યારેય પેજ છોડતી નથી — કોઈ server round-trip કે upload નથી.
શું બ્યૂટિફાઈ કરવું એ અન-મિનિફાઈ કરવા જેવું છે?
તે વાંચી શકાય તેવું ફોર્મેટિંગ પાછું લાવે છે — indentation, line breaks, અને spacing — પણ તે મિનિફિકેશને કાઢી નાખેલી ટિપ્પણીઓ પાછી લાવી શકતું નથી કે ફાઇલમાં ક્યારેય ન હતી તેવી રચના પુનઃપ્રાપ્ત કરી શકતું નથી. તે ફક્ત હાજર એવા declarations અને selectors ને ફરી ફોર્મેટ કરે છે.
શું બ્યૂટિફાઈ કરવાથી મારી સ્ટાઇલ કેવી રીતે રેન્ડર થાય તે બદલાશે?
ના. બ્યૂટિફિકેશન ફક્ત ખાલી જગ્યા અને line breaks ઉમેરે અને દૂર કરે છે; cascade ને સ્પર્શ થતો નથી અને પેજ સરખું જ રેન્ડર થાય છે. Property order, specificity, અને values બધાં બરાબર તમે લખ્યા તેવા જ રહે છે.
કૌંસ-શૈલીના વિકલ્પોનો અર્થ શું છે?
Collapse ખુલતા કૌંસ ને selector ની એ જ લાઇન પર રાખે છે (a {), જે સામાન્ય CSS રિવાજ છે. Expand દરેક ખુલતા કૌંસ ને selector ની નીચે પોતાની અલગ લાઇન પર ઊતારે છે. ખાલી-લાઇન અને દરેક-લાઇન-પર-એક-selector ટૉગલ નિયમો વચ્ચેનું spacing અને h1, h2, h3 જેવા જૂથ થયેલા selectors કેવી રીતે ગોઠવાય તે નિયંત્રિત કરે છે.
બ્રાઉઝર-બાજુ CSS બ્યૂટિફિકેશન તમને build step કે upload વગર વાંચી શકાય તેવી સ્ટાઇલશીટ આપે છે. મિનિફાઈડ કે અવ્યવસ્થિત ફાઇલ પેસ્ટ કરો, તમારી indentation અને કૌંસ શૈલી પસંદ કરો, પછી પરિણામ કૉપી કે ડાઉનલોડ કરો. કંઈ તમારું device છોડતું નથી, કોઈ account નથી, અને લાઇબ્રેરી ફક્ત ત્યારે જ લોડ થાય છે જ્યારે તમે કહો — તેથી આ પેજ ખોલવાનો ખર્ચ તમને એક megabyte નહીં, થોડા કિલોબાઇટ થાય છે.