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 ಬದಲಾವಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
- ಈ ಟೂಲ್ ನಿಮ್ಮ ಪೇಜ್ ಅನ್ನು ಭಾರ ಮಾಡುವುದಿಲ್ಲ. ಹೆಚ್ಚಿನ ಆನ್ಲೈನ್ formatter ಗಳು ನೀವು ಪೇಜ್ ತೆರೆದ ಕ್ಷಣವೇ ತಮ್ಮ ಇಡೀ ಲೈಬ್ರರಿ ಲೋಡ್ ಮಾಡುತ್ತವೆ. ಇದು js-beautify ಅನ್ನು ನೀವು ಬ್ಯೂಟಿಫೈ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ Live mode ಚಾಲು ಮಾಡಿದಾಗ ಮಾತ್ರ lazy-load ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಪೇಜ್ ತೆರೆಯುವುದು ಕೆಲವು ನೂರು ಕಿಲೋಬೈಟ್ಗಳ ಬದಲು ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ, ಮತ್ತು ಆರಂಭಿಕ render ವೇಗವಾಗಿ ಉಳಿಯುತ್ತದೆ.
- ಏನೂ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬಿಡುವುದಿಲ್ಲ. ಬ್ಯೂಟಿಫೈಯರ್ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಸಾಧನದಲ್ಲಿ ಚಲಾಯಿಸಲ್ಪಡುತ್ತದೆ. ನಿಮ್ಮ CSS ಎಂದಿಗೂ server ಗೆ upload ಆಗುವುದಿಲ್ಲ, ಇದು ನೀವು ಪರಿಶೀಲಿಸುತ್ತಿರುವ ಸ್ಟೈಲ್ಶೀಟ್ ಯಾವುದೋ client ಗೆ ಸೇರಿದ್ದಾಗ, ಆಂತರಿಕ class ಹೆಸರುಗಳನ್ನು ಹೊಂದಿದ್ದಾಗ ಅಥವಾ ಗೌಪ್ಯತಾ ಒಪ್ಪಂದದ ಅಡಿಯಲ್ಲಿ ಬಂದಾಗ ಮುಖ್ಯವಾಗುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು
ಓದಲು ಬರೆಯದ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ಯಾರಾದರೂ ಓದಬೇಕಾದಾಗ CSS ಬ್ಯೂಟಿಫೈ ಮಾಡುವುದು ಎದುರಾಗುತ್ತದೆ.
- ಉತ್ಪಾದನಾ ಡೀಬಗ್: ನೀವು ನಿರೀಕ್ಷಿಸಿದ layout ಅನ್ನು overriding ಮಾಡುತ್ತಿರುವ ನಿಯಮವನ್ನು ಹುಡುಕಲು Network ಟ್ಯಾಬ್ನಿಂದ ಎಳೆದ ಮಿನಿಫೈಡ್ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ಪೇಸ್ಟ್ ಮಾಡಿ.
- ಕೋಡ್ ರಿವ್ಯೂ ಸಿದ್ಧತೆ: pull request ತೆರೆಯುವ ಮೊದಲು contributor ನ ಅಸಂಗತ-ಇಂಡೆಂಟ್ ಆದ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ಮರು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿ, ಇದರಿಂದ reviewers layout ಗದ್ದಲವಲ್ಲ, cascade ಬದಲಾವಣೆಗಳನ್ನು ನೋಡುತ್ತಾರೆ.
- ಕಲಿಕೆ ಮತ್ತು ಆಡಿಟ್: framework ಅಥವಾ component-library ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು expand ಮಾಡಿ, ಅದರ selectors, media queries ಮತ್ತು custom properties ಹೇಗೆ ರಚನೆಯಾಗಿವೆ ಎಂದು ಅಧ್ಯಯನ ಮಾಡಲು.
ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ
ಒಂದು ಮಿನಿಫೈಡ್ ಒಂದು-ಸಾಲು ತೆಗೆದುಕೊಳ್ಳಿ: a{color:red;margin:0}b{padding:0}. ಅದನ್ನು ಮೇಲೆ indentation 2 ಸ್ಪೇಸ್ ಮತ್ತು ಬ್ರೇಸ್ ಶೈಲಿ Collapse ಸೆಟ್ ಮಾಡಿ ಪೇಸ್ಟ್ ಮಾಡಿ, ನಂತರ ಬ್ಯೂಟಿಫೈ ಕ್ಲಿಕ್ ಮಾಡಿ. ನಿಮಗೆ ಓದಬಲ್ಲ blocks ಮರಳಿ ಸಿಗುತ್ತವೆ: 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 ಮತ್ತು ಬ್ರೇಸ್ ಶೈಲಿ ಆಯ್ಕೆ ಮಾಡಿ, ನಂತರ ಫಲಿತಾಂಶವನ್ನು copy ಅಥವಾ download ಮಾಡಿ. ಏನೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಡುವುದಿಲ್ಲ, ಯಾವುದೇ account ಇಲ್ಲ, ಮತ್ತು ಲೈಬ್ರರಿ ನೀವು ಕೇಳಿದಾಗ ಮಾತ್ರ load ಆಗುತ್ತದೆ — ಆದ್ದರಿಂದ ಈ ಪೇಜ್ ತೆರೆಯುವುದು ನಿಮಗೆ ಒಂದು megabyte ಅಲ್ಲ, ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ.