ನಮಸ್ಕಾರ, ಆತ್ಮೀಯ ಓದುಗರುಬ್ಲಾಗ್ ಸೈಟ್. ಇದು "ಸ್ಮರಣಾರ್ಥವಾಗಿ" ಸರಣಿಯ ಸಣ್ಣ ಟಿಪ್ಪಣಿಯಾಗಿದೆ. ಸ್ಟೈಲ್ಸ್ ಫೈಲ್‌ನಿಂದ ಹೆಚ್ಚುವರಿ ಸಾಲುಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಆಲೋಚನೆ ಹುಟ್ಟಿಕೊಂಡಿತು. ಬ್ಲಾಗ್‌ನ ಅಸ್ತಿತ್ವದ ಏಳು ವರ್ಷಗಳಲ್ಲಿ, ಬಹಳಷ್ಟು ವಿಷಯಗಳು ಬದಲಾಗಿವೆ, ಆದರೆ STYLE.CSS ಫೈಲ್‌ನಲ್ಲಿನ ಸಾಲುಗಳು ಉಳಿದಿವೆ (ಕೇವಲ ಸಂದರ್ಭದಲ್ಲಿ, ಅಥವಾ ನಾನು ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಮರೆತಿದ್ದೇನೆ). ಈಗ ಅದು ತುಂಬಾ ಭಾರವಾಗಲು ಪ್ರಾರಂಭಿಸಿದೆ ಎಂದು ನನಗೆ ತೋರುತ್ತದೆ, ಆದ್ದರಿಂದ ಅದನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಆಲೋಚನೆ ಹುಟ್ಟಿಕೊಂಡಿತು.

ಇದನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮಾಡುವುದು ತುಂಬಾ ಕಷ್ಟ, ಮತ್ತು ಇದು ಅನಿವಾರ್ಯವಲ್ಲ. ಮಾರ್ಗಗಳಿವೆ ಈ ಪ್ರಕ್ರಿಯೆಸ್ವಯಂಚಾಲಿತ. ಅವುಗಳಲ್ಲಿ ಕೆಲವು ನನಗೆ ಕೆಲಸ ಮಾಡಲಿಲ್ಲ, ಕೆಲವು ಪಾವತಿಸಬೇಕಾಗಿತ್ತು ಮತ್ತು ನಾನು ಅದನ್ನು ಅನಗತ್ಯವೆಂದು ಪರಿಗಣಿಸಿದೆ. ಕೊನೆಯಲ್ಲಿ, ನಾನು ಅರೆ-ಸ್ವಯಂಚಾಲಿತ ವಿಧಾನವನ್ನು ಬಳಸಿದ್ದೇನೆ, ಅದನ್ನು ನಾನು ಮುಂದಿನ ಕೆಲವು ಪ್ಯಾರಾಗಳಲ್ಲಿ ಬರೆಯುತ್ತೇನೆ. ಮುಂದೆ ನೋಡುವಾಗ, ನಾವು CSS ಫೈಲ್‌ನ ಗಾತ್ರವನ್ನು ಅರ್ಧದಷ್ಟು ಕಡಿಮೆ ಮಾಡಲು ನಿರ್ವಹಿಸುತ್ತಿದ್ದೇವೆ ಎಂದು ನಾನು ಹೇಳುತ್ತೇನೆ, ಅದು ನನಗೆ ಸ್ವಲ್ಪ ಆಶ್ಚರ್ಯವಾಯಿತು.

ವೆಬ್‌ಸೈಟ್‌ಗೆ ಅನಗತ್ಯವಾದ CSS ಶೈಲಿಗಳನ್ನು ಹುಡುಕುವ ಆಯ್ಕೆಗಳು

ಸ್ಟೈಲ್ಸ್ ಫೈಲ್ ಅನ್ನು ಬದಲಾಯಿಸುವುದು (ಅದರ ವಿಷಯಗಳು - ನಾನು ಹಳೆಯದನ್ನು ಅಳಿಸಿದ್ದೇನೆ ಮತ್ತು ಹೊಸದನ್ನು ಸೇರಿಸಿದ್ದೇನೆ, ಅದರ ನಂತರ ನಾನು ಫೈಲ್‌ಜಿಲ್ಲಾ ಮೂಲಕ ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿದ್ದೇನೆ) ಹೊಸ (ಹಾನಿಗೊಳಗಾದ) ಒಂದರೊಂದಿಗೆ ಸೈಟ್‌ನಲ್ಲಿ ಯಾವುದೇ ಗೋಚರ ಬದಲಾವಣೆಗಳನ್ನು ಉಂಟುಮಾಡಲಿಲ್ಲ (ಇನ್ನೂ ಅಲ್ಲ, ಕನಿಷ್ಠ , ಬಹಿರಂಗಪಡಿಸಲಾಗಿಲ್ಲ). ಒಟ್ಟಾರೆಯಾಗಿ, ನಾನು ತುಂಬಾ ಸಂತೋಷಪಟ್ಟಿದ್ದೇನೆ ಮತ್ತು ಅದನ್ನು ಪ್ರಯತ್ನಿಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ವೇಗದ, ಸರಳ ಮತ್ತು ಅನುಕೂಲಕರ (ಮತ್ತು ಉಚಿತ).

ನಿಮಗೆ ಶುಭವಾಗಲಿ! ಬ್ಲಾಗ್ ಸೈಟ್‌ನ ಪುಟಗಳಲ್ಲಿ ಶೀಘ್ರದಲ್ಲೇ ನಿಮ್ಮನ್ನು ಭೇಟಿ ಮಾಡುತ್ತೇವೆ

ಗೆ ಹೋಗುವ ಮೂಲಕ ನೀವು ಹೆಚ್ಚಿನ ವೀಡಿಯೊಗಳನ್ನು ವೀಕ್ಷಿಸಬಹುದು

");">

ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿರಬಹುದು

ವೆಬ್‌ಸೈಟ್ ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುವುದು ಮತ್ತು ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು ಹೇಗೆ
ಸಿಎಸ್ಎಸ್ - ಇದು ಏನು, ಕೋಷ್ಟಕಗಳಂತೆ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಶೈಲಿಗಳುಶೈಲಿ ಮತ್ತು ಲಿಂಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು HTML ಕೋಡ್‌ಗೆ ಸಂಪರ್ಕಪಡಿಸಿ
ಆಪ್ಟಿಮೈಸೇಶನ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಕಂಪ್ರೆಷನ್ಪುಟದ ವೇಗದಲ್ಲಿ - ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಹೇಗೆ ಬಾಹ್ಯ ಫೈಲ್ಗಳುಶೈಲಿಗಳು ಮತ್ತು ಲೋಡಿಂಗ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ಅವುಗಳನ್ನು ಒಂದಾಗಿ ಸಂಯೋಜಿಸಿ ತಿರುಗುವಿಕೆಯನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಹಿನ್ನೆಲೆ ಬಣ್ಣಕೋಷ್ಟಕಗಳು, ಪಟ್ಟಿಗಳು ಮತ್ತು ಇತರರ ಸಾಲುಗಳು HTML ಅಂಶಗಳು nth-child ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ
CSS ಯಾವುದಕ್ಕಾಗಿ, ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಪರ್ಕಿಸುವುದು HTML ಡಾಕ್ಯುಮೆಂಟ್ಮತ್ತು ಈ ಭಾಷೆಯ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್
ಪಟ್ಟಿ ಶೈಲಿ (ಪ್ರಕಾರ, ಚಿತ್ರ, ಸ್ಥಾನ) - ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳುಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಕಾಣಿಸಿಕೊಂಡನಲ್ಲಿ ಪಟ್ಟಿಮಾಡುತ್ತದೆ HTML ಕೋಡ್
ವೇಗದ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಪಡೆಯುವುದು - ಚಿತ್ರಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಆಪ್ಟಿಮೈಸೇಶನ್ (ಸಂಕುಚನ), ಹಾಗೆಯೇ Http ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ಸ್ವಚ್ಛ ಮತ್ತು ಸಂಘಟಿತ CSS ನ ಪ್ರಯೋಜನಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆ. ನಿಷ್ಪಾಪ CSS ಹೊಂದಿರುವ ವೆಬ್‌ಸೈಟ್ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಹೆಚ್ಚು ಗೋಚರಿಸುತ್ತದೆ. ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಕ್ಲೀನ್ ಕೋಡ್ಭವಿಷ್ಯದ ಗ್ರಾಹಕರಿಗೆ ವೃತ್ತಿಪರತೆಯ ಸ್ಪಷ್ಟ ಪುರಾವೆಯಾಗಿ ಸಿಎಸ್ಎಸ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಆದರೆ, ಲೆಕ್ಕವಿಲ್ಲದಷ್ಟು ವಿನ್ಯಾಸ ಪುನರಾವರ್ತನೆಗಳು ಮತ್ತು ಬದಲಾವಣೆಗಳ ಮೂಲಕ CSS ಮಾರ್ಕ್ಅಪ್ ಕಸವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು ಕೈಯಿಂದ ಮಾಡುವ ಶ್ರಮದಾಯಕ, ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ಕೆಲವು ಅದ್ಭುತ ಮತ್ತು ಇವೆ ಉಪಯುಕ್ತ ಉಪಕರಣಗಳು, ಇದು CSS ನ ಕೆಲವು ಸಂಬಂಧಿತ ಅಂಶಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಪುಟದಲ್ಲಿ ನಾನು ವೈಯಕ್ತಿಕವಾಗಿ ಪರಿಶೀಲಿಸಿದ CSS ಸ್ವಚ್ಛಗೊಳಿಸುವ ಪರಿಕರಗಳಿಗೆ ಲಿಂಕ್‌ಗಳಿವೆ CSS ಮಾರ್ಕ್ಅಪ್ಕೆಳಗಿನ ಎಲ್ಲಾ ಪರಿಕರಗಳ ಮೇಲೆ ಸೈಟ್, ಅದೇ ರೀತಿ ಮಾಡಲು ನಾನು ನಿಮಗೆ ಸಲಹೆ ನೀಡುತ್ತೇನೆ.

CSS ನಿರ್ಮಲೀಕರಣ ಪರಿಕರಗಳು

ನಿಮ್ಮ CSS ಅನ್ನು ಸುಧಾರಿಸಲು ProCSSor

ProCSSor ನಿಮ್ಮ CSS ಅನ್ನು ತ್ವರಿತವಾಗಿ ಸುಧಾರಿಸಲು ಸರಳವಾದ, ಯಾವುದೇ ಅಲಂಕಾರಗಳಿಲ್ಲದ ಸಾಧನವಾಗಿದೆ. OS X, iOS, ಅಥವಾ ಯಾವುದೇ ಬ್ರೌಸರ್ ಮೂಲಕ ಲಭ್ಯವಿದೆ, ಉಪಕರಣವು CSS ಫೈಲ್, ಅಂಟಿಸಿದ ತುಣುಕು ಅಥವಾ URL ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ತಕ್ಷಣವೇ ನಿಮ್ಮ CSS ಗಾಗಿ ಭವಿಷ್ಯದ ಕೋಡ್ ಅನ್ನು ಸರಿಪಡಿಸುತ್ತದೆ ಮತ್ತು ತೋರಿಸುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಲಿಂಟ್

ಉಪಕರಣ CSS ಪರಿಶೀಲನೆಗಳುಬದಲಾವಣೆಗಳ ವಿವರಣೆಯೊಂದಿಗೆ

CSS ಲಿಂಟ್ ಇತರ CSS ಸ್ವಚ್ಛಗೊಳಿಸುವ ಪರಿಕರಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ ಶಿಫಾರಸುಗಳನ್ನು ನೀಡುತ್ತದೆ. ಅವರಲ್ಲಿ ಹೆಚ್ಚಿನವರು ಸಿಎಸ್ಎಸ್ ಬದಲಾವಣೆಗಳ ಬಗ್ಗೆ ಮಾತನಾಡುವುದಿಲ್ಲ, ಆದರೆ ಸಿಎಸ್ಎಸ್ ಲಿಂಟ್ ಪ್ರತಿ ಶಿಫಾರಸು ಮಾಡಿದ ಬದಲಾವಣೆಗಳಿಗೆ ಸಣ್ಣ ವಿವರಣೆಯನ್ನು ನೀಡುತ್ತದೆ. ಇದು ದೋಷಗಳು, ಹೊಂದಾಣಿಕೆ, ಕಾರ್ಯಕ್ಷಮತೆ, ಡಿಡ್ಪ್ಲಿಕೇಶನ್ ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆಯ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುವ ವೈಶಿಷ್ಟ್ಯಗಳ ಶ್ರೇಣಿಯನ್ನು ಹೊಂದಿದೆ, ಅದನ್ನು ಆನ್ ಅಥವಾ ಆಫ್ ಮಾಡಬಹುದು.

ಡರ್ಟಿ ಮಾರ್ಕ್ಅಪ್

ಡರ್ಟಿ ಮಾರ್ಕಪ್ ಉಪಕರಣವು ಹಲವಾರು ವಿಭಿನ್ನ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ

ಡರ್ಟಿ ಮಾರ್ಕ್ಅಪ್ ಕೋಡ್ ಆಪ್ಟಿಮೈಸೇಶನ್ಗೆ ವಿಶಿಷ್ಟವಾದ ವಿಧಾನವನ್ನು ಹೊಂದಿದೆ; ಕ್ಷೇತ್ರವು ಕೋಡ್‌ನಿಂದ ತುಂಬಿದಾಗ ಅದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಹಲವಾರು ವಿಭಿನ್ನ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು HTML ಟೈಡಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಏಸ್ ಎಡಿಟರ್ ಮತ್ತು ಮಾಡುತ್ತದೆ ಸಮಗ್ರ ಶುಚಿಗೊಳಿಸುವಿಕೆಕೋಡ್. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ನಂತೆಯೇ CSS ನಂತೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

CleanCSS

CleanCSS ಉಪಕರಣವು CSS ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ

CleanCSS URL ಅಥವಾ ಸೇರಿಸಲಾದ ಕೋಡ್‌ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ವಿವಿಧ CSS ಆಪ್ಟಿಮೈಸೇಶನ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಅನ್ನು ನೀಡುತ್ತದೆ. ನೀವು ಐದರಲ್ಲಿ ಆಯ್ಕೆ ಮಾಡಬಹುದು ವಿವಿಧ ಸೆಟ್ಟಿಂಗ್ಗಳುಓದುವಿಕೆ ಮತ್ತು ಫೈಲ್ ಗಾತ್ರದ ನಡುವೆ ವ್ಯಾಪಾರ-ವಹಿವಾಟುಗಳನ್ನು ನೀಡುವ ಸಂಕೋಚನಗಳು.

ಕೋಡ್ ಬ್ಯೂಟಿಫೈಯರ್

ಕೋಡ್ ಬ್ಯೂಟಿಫೈಯರ್ ಸರಳ cssಸ್ವಚ್ಛಗೊಳಿಸುವ ಸಾಧನ

ಕೋಡ್ ಬ್ಯೂಟಿಫೈಯರ್ ಸರಳ ಸಿಎಸ್ಎಸ್ ಕ್ಲೀನಪ್ ಟೂಲ್ ಇಲ್ಲದೆ ಅನಗತ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳು. ಇದು URL ಅಥವಾ ಕೋಡ್ ಅಳವಡಿಕೆಯ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ವೈವಿಧ್ಯಮಯ ಆಯ್ಕೆಗಳ ಆಧಾರದ ಮೇಲೆ ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ. ಕೋಡ್ ಕ್ಲೀನಪ್ ಆಯ್ಕೆಗಳ ಸಮುದ್ರದಲ್ಲಿ ಕಳೆದುಹೋಗದೆ ನಿಮಗೆ ತ್ವರಿತ CSS ಕ್ಲೀನಪ್ ಅಗತ್ಯವಿದ್ದರೆ, ಇದು ನಿಮ್ಮದಾಗಿರಬಹುದು ಪರಿಪೂರ್ಣ cssಸ್ವಚ್ಛಗೊಳಿಸುವ ಸಾಧನ.

ಸ್ಪ್ರಿಟ್‌ಮ್ಯಾಪರ್

ಸ್ಪ್ರಿಟ್‌ಮ್ಯಾಪರ್ ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ, ಬಹು ಚಿತ್ರಗಳನ್ನು ಸಿಎಸ್‌ಎಸ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ಸಂಯೋಜಿಸುತ್ತದೆ

ಇತರ ಯಾವುದೇ ಉಪಕರಣಗಳು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು ಉಲ್ಲೇಖಿಸಿಲ್ಲ, ಇದು ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವಷ್ಟೇ ಉಪಯುಕ್ತವಾಗಿದೆ. ಸ್ಪ್ರಿಟ್‌ಮ್ಯಾಪರ್ ಸ್ಪ್ರಿಟ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ, ಸರಿಯಾದ ಸ್ಥಾನದೊಂದಿಗೆ CSS ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ ಬಹು ಚಿತ್ರಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ. ಫಲಿತಾಂಶವು ವೇಗವಾದ ಸೈಟ್, ಕಡಿಮೆ ಪ್ರಮಾಣವಾಗಿದೆ HTTP ವಿನಂತಿಗಳು, ಮತ್ತು ಹೆಚ್ಚು ಸುವ್ಯವಸ್ಥಿತ CSS ಶೈಲಿ.

ಮೇಲುಡುಪು

ಟಾಪ್ ಕೋಟ್ ಅಲ್ಲ ಸಾಂಪ್ರದಾಯಿಕ ವಾದ್ಯ CSS ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆ

ಟಾಪ್ ಕೋಟ್ ಸಾಂಪ್ರದಾಯಿಕ CSS ಸ್ವಚ್ಛಗೊಳಿಸುವ ಸಾಧನವಲ್ಲ; ಇದು ಮೂಲಭೂತವಾಗಿ CSS ಅಭಿವೃದ್ಧಿ ಕಿಟ್, ಶುದ್ಧ CSS ಕ್ಯುರೇಶನ್ ವಿಧಾನವಾಗಿದೆ. ನೀವು ಚೆನ್ನಾಗಿ ಬರೆಯಲಾದ CSS ಅನ್ನು ಹೊಂದಿದ್ದರೆ, ನೀವು ಬಹುಶಃ CSS ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

CSSTidy ಉಪಕರಣವು Windows, Mac, ಅಥವಾ Linux ವೇದಿಕೆಗಳು.

CSSTidy ಅನೇಕ CSS ಕ್ಲೀನಪ್ ಪರಿಕರಗಳನ್ನು ಹೋಲುತ್ತದೆ, ಆದರೆ ಇದು ಕೆಲವು ವಿಶಿಷ್ಟ ಲಕ್ಷಣಗಳನ್ನು ನೀಡುತ್ತದೆ. CSSTidy ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕರೆಯಬಹುದು ಆಜ್ಞಾ ಸಾಲಿನಅಥವಾ PHP, ಮತ್ತು ಇದು ವಿಂಡೋಸ್, ಮ್ಯಾಕ್, ಅಥವಾ ಲಿನಕ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಚಲಿಸುತ್ತದೆ. CSSTidy-ಕ್ಲೀನಪ್ ಟೂಲ್ ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ವರ್ಕ್‌ಫ್ಲೋಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮದನ್ನು ಉಳಿಸುತ್ತದೆ CSS ಕ್ಲೀನ್ಆಫ್ಲೈನ್. W3C ವಾಲ್ಡಿಯೇಟರ್ CSS ಕೋಡ್ ಮೌಲ್ಯೀಕರಣ ಸಾಧನ

W3C ವಾಲ್ಡಿಯೇಟರ್ ಕೋಡ್ ಕ್ಲೀನಪ್, ಕಂಪ್ರೆಷನ್ ಅಥವಾ ಆಪ್ಟಿಮೈಸೇಶನ್ ಪರಿಕರಗಳನ್ನು ನೀಡುವುದಿಲ್ಲ, ಆದರೆ CSS ಕೋಡ್ ನಿಜವಾಗಿಯೂ ಮುರಿದುಹೋದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದನ್ನು ಖಂಡಿತವಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮೇಲಿನ ಉಪಕರಣಗಳು ತಮ್ಮದೇ ಆದ ಪರಿಕರಗಳನ್ನು ಹೊಂದಿವೆ, ಇದನ್ನು W3C ಕನ್ಸೋರ್ಟಿಯಂನಿಂದ ತಯಾರಿಸಲಾಗುತ್ತದೆ, ಇದು ಮಾನದಂಡಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

ನಿರ್ಗಮಿಸುವ ಡೆವಲಪರ್ ಅನ್ನು ಬದಲಿಸಲು ನೀವು ಈಗಷ್ಟೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಯೋಜನೆಗೆ ಸೇರಿರುವಿರಿ. ಅಥವಾ ಕೆಲವು ವರ್ಷಗಳ ನಂತರ ಅವರು ತಮ್ಮ ಹಳೆಯ ಯೋಜನೆಯನ್ನು ಕೈಗೆತ್ತಿಕೊಳ್ಳಬಹುದು. ಕೋಡ್ ಅನ್ನು ನೋಡುವಾಗ ನೀವು ಭಯಾನಕ ಮತ್ತು ಅಸಹ್ಯವನ್ನು ಅನುಭವಿಸುತ್ತೀರಿ. ನೀವು ಮಾಡಬಹುದಾದ ಒಂದೇ ಒಂದು ವಿಷಯವಿದೆ: ಈ ಸಂಪೂರ್ಣ ಅವ್ಯವಸ್ಥೆಯನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ. ನೀವು ಮೊದಲು ಇದೇ ರೀತಿಯದ್ದನ್ನು ಎದುರಿಸಿದ್ದೀರಾ? ಬಹುತೇಕ ಖಚಿತವಾಗಿ, ಬೇಗ ಅಥವಾ ನಂತರ ಪ್ರತಿಯೊಬ್ಬರೂ ಇದನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ.

CSS ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು ದೊಡ್ಡ ಕೆಲಸ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದೆ. ಮಾಡಬೇಕಾದ್ದು ಬಹಳಷ್ಟಿದೆ ಸೀಮಿತ ಸಮಯ- ವಿಶೇಷವಾಗಿ ಕ್ಲೈಂಟ್‌ಗಳು/ಮೇಲಧಿಕಾರಿಗಳು/ಸಹೋದ್ಯೋಗಿಗಳು ಕೆಲಸ ಮಾಡುವದನ್ನು ಮುಟ್ಟದಂತೆ ಒತ್ತಾಯಪೂರ್ವಕವಾಗಿ ಸಲಹೆ ನೀಡಿದಾಗ. ಎಲ್ಲಿಂದ ಪ್ರಾರಂಭಿಸಬೇಕು ಎಂದು ನಿಮಗೆ ತಿಳಿದಿಲ್ಲ.

ಲಿಂಟಿಂಗ್ ನಮಗೆ ಎಲ್ಲವೂ

ಈ ವಿಭಾಗದಲ್ಲಿ ನೀವು ಸಾಸ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ಪ್ರಸ್ತುತ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಇದು ಸಮಂಜಸವಾದ ಊಹೆಯಾಗಿರುವುದರಿಂದ ಮಾತ್ರವಲ್ಲ, ಏಕೆಂದರೆ ದುರುಪಯೋಗಸಾಸ್ ಸಾಮಾನ್ಯವಾಗಿ ಕೋಡ್ಬೇಸ್ ಮಾಲಿನ್ಯಕ್ಕೆ ಕಾರಣವಾಗಿದೆ. ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಬಳಸದವರಿಗೆ ಈ ಲೇಖನವು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, ನೀವು ಅದನ್ನು ಕೊನೆಯವರೆಗೂ ಓದಬೇಕು.

ಕೋಡ್ ಬೇಸ್ ಅನ್ನು ನಾನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾದಾಗ ನಾನು ಮಾಡುವ ಮೊದಲನೆಯದು ಲಿಂಟಿಂಗ್ ಆಗಿದೆ. ಸಂಭಾವ್ಯ ದೋಷಗಳು ಮತ್ತು ಕೆಟ್ಟ ಅಭ್ಯಾಸಗಳನ್ನು ನೋಡಲು ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಪ್ರಕ್ರಿಯೆಯು ಲಿಂಟಿಂಗ್ ಆಗಿದೆ. ಕೋಡ್ ಅನ್ನು ಕ್ಲೀನ್ ಮಾಡುವ ಮೂಲಕ ನಾವು ಮೊದಲ ಹೆಜ್ಜೆ ಇಡುತ್ತೇವೆ ಎಂದು ನಾನು ನಂಬುತ್ತೇನೆ ಉತ್ತಮ ಕೋಡ್. ಲಿಂಟಿಂಗ್ ಪದದ ವ್ಯುತ್ಪತ್ತಿಯನ್ನು StackOverflow ನಲ್ಲಿ ಈ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು.

ಸಾಸ್ ರೂಬಿಯಲ್ಲಿ SCSS-ಲಿಂಟ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಲಿಂಟರ್ ಅನ್ನು ಹೊಂದಿದೆ. ನೀವು ಅದನ್ನು ನೀವೇ ಹೊಂದಿಸಬಹುದು ಅಥವಾ ಈಗಿನಿಂದಲೇ ಪ್ರಾರಂಭಿಸಲು ಸಾಸ್-ಮಾರ್ಗಸೂಚಿಗಳು ಶಿಫಾರಸು ಮಾಡಿದ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು. ಅಲ್ಲದೆ Node.js ಸಾಸ್-ಲಿಂಟ್ ಅನ್ನು ಹೊಂದಿದೆ, ಅವು 100% ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ ಮತ್ತು ವಿಭಿನ್ನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು.

ದೋಷಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ನಿಮ್ಮ ಸಾಸ್ ಫೈಲ್‌ಗಳ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ SCSS-Lint ಅನ್ನು ಚಲಾಯಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ಒಂದು ಟನ್ ದೋಷಗಳು ನಿಮ್ಮ ಮೇಲೆ ಬೀಳುವ ಸಾಧ್ಯತೆಗಳು ತುಂಬಾ ಹೆಚ್ಚು. ಸಾಮಾನ್ಯವಾಗಿ ಇದರ ನಂತರ ನೀವು ಕೋಡ್ ಸ್ವಚ್ಛಗೊಳಿಸುವ ಪ್ರಯೋಗವನ್ನು ನಿಲ್ಲಿಸಲು ಬಯಸುತ್ತೀರಿ. ತಾಳ್ಮೆಯಿಂದಿರಿ. ಈ ಹಂತದಲ್ಲಿ, ನಿಮಗೆ ಬಹಳ ಮುಖ್ಯವಲ್ಲದ (ಬಣ್ಣದ ಸ್ವರೂಪದಂತಹ) ನಿಯಮಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸಂರಚನೆಯನ್ನು ಕಡಿಮೆ ನಿರ್ಬಂಧಿತವಾಗಿಸಲು ನೀವು ಪ್ರಯತ್ನಿಸಬಹುದು ಅಥವಾ ಕೊಂಬುಗಳಿಂದ ಬುಲ್ ಅನ್ನು ತೆಗೆದುಕೊಂಡು ಲೈಂಟಿಂಗ್‌ನ ಸಂಪೂರ್ಣ ಶಕ್ತಿಯನ್ನು ಬಳಸಬಹುದು.

ಕಂಡುಬಂದ ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಲಾಗುತ್ತಿದೆ

ಏನನ್ನು ಸರಿಪಡಿಸಬೇಕೋ ಅದನ್ನು ಸರಿಪಡಿಸುವ ಸಮಯ ಬಂದಿದೆ. ಇದನ್ನು ಎರಡು ರೀತಿಯಲ್ಲಿ ಮಾಡಬಹುದು. ಮೊದಲನೆಯದು ಎಲ್ಲಾ ಫೈಲ್‌ಗಳನ್ನು ಒಂದೊಂದಾಗಿ ಪರಿಶೀಲಿಸುವುದು ಮತ್ತು ವಿಫಲವಾದ ವೇರಿಯಬಲ್ ಹೆಸರಿಸುವಿಕೆ, ಸೆಲೆಕ್ಟರ್‌ಗಳ ಅತಿಯಾದ ಗೂಡುಕಟ್ಟುವಿಕೆ ಮತ್ತು ಕಳಪೆ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾದ ಕೋಡ್‌ನಂತಹ ಎಲ್ಲಾ ದೋಷಗಳು ಮತ್ತು ನ್ಯೂನತೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದು. ಎರಡನೆಯದು (ನನ್ನ ಆದ್ಯತೆ) ಹುಡುಕಾಟವನ್ನು ಬಳಸುವುದು ಮತ್ತು ಬದಲಾಯಿಸುವುದು. ನಿಮ್ಮ ಬಗ್ಗೆ ನನಗೆ ಗೊತ್ತಿಲ್ಲ, ಆದರೆ ನಾನು ಅದನ್ನು ಪ್ರೀತಿಸುತ್ತೇನೆ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳುಮತ್ತು ನಾನು ಯಾವಾಗಲೂ ನನ್ನ ಕೆಲಸದಲ್ಲಿ ಅವುಗಳನ್ನು ಬಳಸಲು ಇಷ್ಟಪಡುತ್ತೇನೆ.

ನೀವು ಎಲ್ಲಾ ಫ್ಲೋಟಿಂಗ್ ಪಾಯಿಂಟ್ ಸಂಖ್ಯೆಗಳಲ್ಲಿ (ಅಂದರೆ, 0 ರಿಂದ 1 ರವರೆಗೆ) ಕಾಣೆಯಾದ ಶೂನ್ಯವನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ, ಈ ರೀತಿಯ ದೋಷಗಳನ್ನು SCSS-ಲಿಂಟ್‌ನಲ್ಲಿ ಲೀಡಿಂಗ್‌ಝೀರೋ ನಿಯಮವನ್ನು ಬಳಸಿ ಹಿಡಿಯಲಾಗುತ್ತದೆ. ಇದನ್ನು ಮಾಡಲು, ಹುಡುಕಾಟಕ್ಕಾಗಿ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿ \s+\.(\d+) ಅನ್ನು ಬಳಸಿ (ಡಾಟ್ ಹೊಂದಿರುವ ಜಾಗವನ್ನು ಅನುಸರಿಸುವ ಎಲ್ಲಾ ಸಂಖ್ಯೆಗಳು), ಮತ್ತು ಬದಲಿಗಾಗಿ \0.$1 (ಸ್ಪೇಸ್, ​​ಶೂನ್ಯ, ಡಾಟ್ ಮತ್ತು ಕಂಡುಬಂದ ಸಂಖ್ಯೆ). ಮತ್ತು ನೀವು BorderZero ಲಿಂಟರ್ ನಿಯಮದ ಬಗ್ಗೆ ಕಾಳಜಿ ಹೊಂದಿದ್ದರೆ, ನಂತರ ನೀವು ಎಲ್ಲಾ ಗಡಿಯನ್ನು ಬದಲಾಯಿಸಬಹುದು: ಯಾವುದೇ ನಿಯಮಗಳಿಲ್ಲ ಗಡಿಯೊಂದಿಗೆ: 0 ಅನ್ನು ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ಹುಡುಕಾಟ/ಬದಲಿಯನ್ನು ಬಳಸಿ. ಇದು ಸುಲಭ ಸಾಧ್ಯವಿಲ್ಲ!

ಲಿಂಟಿಂಗ್‌ಗಾಗಿ ಎಲ್ಲಾ ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲು ನಾನು ಇತ್ತೀಚೆಗೆ GitHub ನಲ್ಲಿ scss-lint-regex ರೆಪೊಸಿಟರಿಯನ್ನು ರಚಿಸಿದ್ದೇನೆ. ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಲಿಂಟಿಂಗ್‌ನಲ್ಲಿ ನಿಮಗೆ ತೊಂದರೆ ಇದ್ದರೆ ಖಂಡಿತವಾಗಿಯೂ ಅದನ್ನು ನೋಡಿ. ಮತ್ತು ಹುಡುಕಾಟ/ಬದಲಿಯೊಂದಿಗೆ ಜಾಗರೂಕರಾಗಿರಿ, ಇದು ಕೆಲವೊಮ್ಮೆ ಅನಿರೀಕ್ಷಿತವಾಗಿ ಕಾರಣವಾಗುತ್ತದೆ ಅಡ್ಡ ಪರಿಣಾಮಗಳು. ಪ್ರತಿ ಬದಲಾವಣೆಯ ನಂತರ, ಏನು ಬದಲಾಗಿದೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು git diff ಅನ್ನು ರನ್ ಮಾಡಿ, ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ನೀವು ದೋಷಗಳನ್ನು ಸೇರಿಸುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಒಮ್ಮೆ ನೀವು ಹುಡುಕಿ/ಬದಲಿ ಸಂಪಾದನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದರೆ, ನೀವು ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ ಹಸ್ತಚಾಲಿತ ಸಂಪಾದನೆ, ಪರಿಷ್ಕರಿಸಬೇಕಾದ ಸ್ಥಳಗಳಲ್ಲಿ (ತಪ್ಪಾದ ಇಂಡೆಂಟೇಶನ್‌ಗಳು, ಕೊರತೆ ಅಥವಾ ಹೆಚ್ಚುವರಿ ಖಾಲಿ ಸಾಲುಗಳು, ಕಾಣೆಯಾದ ಜಾಗಗಳು, ಇತ್ಯಾದಿ). ಇದು ಸಾಕಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಮುಂದಿನ ಹಂತದಲ್ಲಿ ಇದು ನಿಮಗೆ ಬಹಳಷ್ಟು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಮುಂದುವರಿಯುವ ಮೊದಲು ಇದನ್ನು ಮಾಡುವುದು ಮುಖ್ಯ.

ಅನುವಾದಕರ ಟಿಪ್ಪಣಿ

ಈ ಕೆಲವು ಕೆಲಸಗಳನ್ನು SassBeutify ನ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಮಾಡಬಹುದು ಪಠ್ಯ ಸಂಪಾದಕರು, ಉದಾಹರಣೆಗೆ ಉತ್ಕೃಷ್ಟ ಅಥವಾ ಪರಮಾಣು .

ಯೋಜನೆಯ ರಚನೆಯ ವಿಮರ್ಶೆ

ನಾನು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಸೇರಿದಾಗ ನಿಜವಾಗಿಯೂ ನನಗೆ ತುಂಬಾ ತೊಂದರೆಯಾಗುವುದು ಸರಿಯಾದ ಪ್ರಾಜೆಕ್ಟ್ ಆರ್ಕಿಟೆಕ್ಚರ್ ಕೊರತೆ. ಬಹುಶಃ ಕೆಲಸದ ಪ್ರಾರಂಭದಲ್ಲಿ ಕೆಲವು ರೀತಿಯ ಯೋಜನೆಗಳು ಇದ್ದಿರಬಹುದು, ಆದರೆ ಕಾಲಾನಂತರದಲ್ಲಿ ವಿಷಯಗಳು ನಿಯಂತ್ರಣದಿಂದ ಹೊರಬರುತ್ತವೆ ಮತ್ತು ಮೂಲ ಯೋಜನೆ ಕಳೆದುಹೋಗುತ್ತದೆ. ಆದರೆ ಇದು ಇನ್ನೂ ನಂಬಲಾಗದಷ್ಟು ಮುಖ್ಯವಾಗಿದೆ.

ಯೋಜನೆಯ ವಿಧಾನದ ಆಯ್ಕೆಯು ತುಂಬಾ ಮುಖ್ಯವಲ್ಲ, ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ ನೀವು ಅದನ್ನು ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ನಿಮಗೆ ಅಸ್ವಸ್ಥತೆಯನ್ನು ಉಂಟುಮಾಡುವುದಿಲ್ಲ. ಇದು SMACSS, 7-1 ಅಥವಾ ITCSS ಆಗಿರಬಹುದು - ಆಯ್ಕೆಯು ನಿಮ್ಮದಾಗಿದೆ. ನಿಮ್ಮ ಆಯ್ಕೆ ವಿಧಾನದ ಪ್ರಕಾರ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಮರುರಚಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ಸಾಸ್ ಮಾರ್ಗಸೂಚಿಗಳಲ್ಲಿ ನಾವು ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ 7-1 ಮಾದರಿಯನ್ನು ಬಳಸಲು ನಾನು ಒಲವು ತೋರುತ್ತೇನೆ, ಆದ್ದರಿಂದ ನೀವು ಈ ಮಾರ್ಗವನ್ನು ಆರಿಸಿಕೊಂಡರೆ ಸಹಾಯ ಮಾಡಲು ನಾನು ನಿಮಗೆ ಕೆಲವು ಸಲಹೆಗಳನ್ನು ನೀಡುತ್ತೇನೆ.

ನಂತರ ಅಮೂರ್ತ ಡೈರೆಕ್ಟರಿಗೆ ಹೋಗೋಣ. ಎಲ್ಲಾ ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು, ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳು ಇಲ್ಲಿಗೆ ಹೋಗಬೇಕು. ನಿಮ್ಮ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವವರೆಗೆ ನೀವು ಬಯಸಿದಂತೆ ಅವುಗಳನ್ನು ವ್ಯವಸ್ಥೆಗೊಳಿಸಲು ನೀವು ಮುಕ್ತರಾಗಿದ್ದೀರಿ. ನಾನು ಈ ಹಂತದಲ್ಲಿ ಐಚ್ಛಿಕ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು (ಮತ್ತು ಮಿಕ್ಸಿನ್ಸ್) ಗುರುತಿಸುತ್ತೇನೆ, ಏಕೆಂದರೆ ನಾನು ಒಮ್ಮೆ ಅಥವಾ ಎರಡು ಬಾರಿ ಬಳಸುವ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಎದುರಿಸುತ್ತೇನೆ.

ಒಮ್ಮೆ ನೀವು ಇದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ನಂತರ, ಮುಂದಿನ ಎರಡು ಹಂತಗಳಲ್ಲಿ ಯಾವುದನ್ನು ಮೊದಲು ತೆಗೆದುಕೊಳ್ಳಬೇಕೆಂದು ನೀವು ನಿರ್ಧರಿಸಬೇಕು. ಮೂಲ ಡೈರೆಕ್ಟರಿಯ ಎಲ್ಲಾ ವಿಷಯಗಳು ನಿಜವಾದ ಮೂಲ ಶೈಲಿಗಳು ಮತ್ತು ಘಟಕ ಶೈಲಿಗಳಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಪ್ರಯತ್ನಿಸಬಹುದು. ಅಥವಾ ಲೇಔಟ್ ಡೈರೆಕ್ಟರಿಯು ಪುಟ ವಿನ್ಯಾಸಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಎಲ್ಲವನ್ನೂ ಹೊಂದಿದೆಯೇ ಮತ್ತು ಈ ಕೋಡ್ ಅನ್ನು ಸರಿಯಾಗಿ ದಾಖಲಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.

ಅಂತಿಮವಾಗಿ, ವಿಷಯಗಳನ್ನು ಮುಗಿಸಲು, ನೀವು ಘಟಕಗಳ ಡೈರೆಕ್ಟರಿಯನ್ನು ನಿರ್ಮಿಸುವ ಅಗತ್ಯವಿದೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಬೃಹತ್ ಕಾರ್ಯವಾಗಿದೆ. ಸಾಧ್ಯವಾದಷ್ಟು ಘಟಕಗಳನ್ನು ತಯಾರಿಸಲು ನಾನು ಸಲಹೆ ನೀಡುತ್ತೇನೆ ಸಣ್ಣ ಗಾತ್ರಮತ್ತು ಅವುಗಳ ಪುನರಾವರ್ತಿತ ಬಳಕೆಯ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ. ನೀವು ಅವುಗಳ ಸಂಖ್ಯೆಯನ್ನು ಹೆಚ್ಚಿಸಿದರೂ ಪರವಾಗಿಲ್ಲ - ಅವು ಸಂದರ್ಭವಿಲ್ಲದ ಮತ್ತು ಓದಲು, ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾದವರೆಗೆ.

ಸರಿಯಾದ ಮತ್ತು ಸಣ್ಣ ಘಟಕದ ಉದಾಹರಣೆಯಾಗಿ, ನಾನು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ನೀಡಬಹುದು:

ಉಲ್ಲೇಖ (ಪ್ಯಾಡಿಂಗ್: 10px; ) .quote__attribution (font-size: 80%; ) .quote > :first-child ( margin-top: 0; ) .quote > : last-child ( margin-bottom: 0; )

ಮಾಡ್ಯೂಲ್‌ಗಳಲ್ಲಿ ಯೋಚಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ಕಡಿಮೆ. ಸುಲಭ. ಹೆಚ್ಚು ಸ್ವತಂತ್ರ.

ಅನಗತ್ಯ ತೆಗೆದುಹಾಕುವುದು

ಕೆಟ್ಟ ಮತ್ತು ನಡುವಿನ ದೊಡ್ಡ ವ್ಯತ್ಯಾಸವನ್ನು ನಾನು ನಂಬುತ್ತೇನೆ ಉತ್ತಮ CSSಇದು ಕೋಡ್‌ನ ಮೊತ್ತವಾಗಿದೆ. CSS ಬೆಳೆಯಲು ತುಂಬಾ ಸುಲಭ. ಕೆಲವು ಜನರು ಪ್ರಯೋಗ ಮತ್ತು ದೋಷದ ಮೂಲಕ ಪ್ರತಿಯೊಂದು ವಿನ್ಯಾಸವನ್ನು ಮಾಡಬಹುದು. ಕನಿಷ್ಠ CSS ಅನ್ನು ಬಳಸಿಕೊಂಡು ಏನನ್ನಾದರೂ ಮಾಡುವ ಸಾಮರ್ಥ್ಯವು ಕೆಲಸವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಕನಿಷ್ಠ ವಿಧಾನವನ್ನು ನಿರ್ವಹಿಸುವುದು ನಿಜವಾದ ಸವಾಲಾಗಿದೆ.

ಇದು ಈಗಾಗಲೇ 3 ವರ್ಷಗಳು, ಆದರೆ ನಿಕೋಲಸ್ ಗಲ್ಲಾಘರ್ ಅವರ ಈ ಟ್ವೀಟ್ನನ್ನ ನೆಚ್ಚಿನ CSS ಪ್ರಶ್ನೆಯಾಗಿ ಉಳಿದಿದೆ:

ಅಸಮ್ಮತಿಯು CSS ನ ನಿಜವಾದ ಪ್ಲೇಗ್ ಆಗಿದೆ. ಶೈಲಿಗಳನ್ನು ಬರೆಯುವಾಗ, ನಾವು ಸಾಮಾನ್ಯವಾಗಿ ಹಿಂದಕ್ಕೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಹೋಗುತ್ತೇವೆ, ಹೊಸ ನಿಯಮಗಳನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ - ನಾವು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲವು ಸಂಪೂರ್ಣವಾಗಿ ಅನಗತ್ಯ ಘೋಷಣೆಗಳನ್ನು ಬಿಡುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, ಓವರ್‌ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ , ಇದು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲ, ಅಥವಾ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ಅವುಗಳನ್ನು ಬಿಟ್ಟು, ನಾವು ತಾಂತ್ರಿಕ ಸಾಲವನ್ನು ಹೆಚ್ಚಿಸುತ್ತೇವೆ. ಇದರಲ್ಲಿ ಒಳ್ಳೆಯದೇನೂ ಇಲ್ಲ.

CSS ಬರೆಯುವಾಗ, ನಾನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ತೆರೆಯಲು ಬಳಸುತ್ತಿದ್ದೇನೆ ಮತ್ತು ಸಲ್ಲಿಸುವ ಮೊದಲು ಪ್ರತಿ CSS ಘೋಷಣೆಯನ್ನು ಒಂದೊಂದಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತೇನೆ. ಸಿದ್ಧ ಕೋಡ್ಅವರು ಏನು ಪರಿಣಾಮ ಬೀರುತ್ತಾರೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಲು. ಅವರು ಯಾವುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಿದ್ದರೆ, ನಾನು ಮೊದಲು ನನ್ನನ್ನು ಕೇಳಿಕೊಳ್ಳುತ್ತೇನೆ: "ಅವರು ಏಕೆ ಇಲ್ಲಿದ್ದಾರೆ?" ಅವು ನಿಷ್ಪ್ರಯೋಜಕವೆಂದು ತೋರಿದರೆ, ನಾನು ಅವುಗಳನ್ನು ಅಳಿಸುತ್ತೇನೆ. ಈ ರೀತಿಯ ಸರಳ ತಂತ್ರದೊಂದಿಗೆ, ಕೇವಲ ಉಪಯುಕ್ತ ಕೋಡ್ ಮತ್ತು ಯಾವುದೇ ಜಂಕ್ ಅನ್ನು ರೆಪೊಸಿಟರಿಗೆ ಸಲ್ಲಿಸುವುದಿಲ್ಲ ಎಂದು ನಾನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

CSS ಕೋಡ್ಬೇಸ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು ಅದೇ ತಂತ್ರವಾಗಿದೆ. ನೀವು ಸ್ವಚ್ಛಗೊಳಿಸಲು ಬಯಸುವ ಘಟಕವನ್ನು ಗುರುತಿಸಿ, ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಅನುಪಯುಕ್ತ ಘೋಷಣೆಗಳನ್ನು ಹುಡುಕಲು ಪ್ರಯತ್ನಿಸಿ. ಕೆಲವೊಮ್ಮೆ, CSS ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು, ಕ್ಯಾಸ್ಕೇಡ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಾವು ಈ ಶೈಲಿಗಳನ್ನು ಮರದ ಮೇಲೆ ಚಲಿಸಬೇಕಾಗುತ್ತದೆ. ಕೆಳಗಿನ ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಇದನ್ನು ನೋಡೋಣ:

ಪೋಷಕ ( /* ...ಇಲ್ಲಿನ ವಿಷಯ... */ ) .child-A (ಬಣ್ಣ: ಕೆಂಪು; ) .child-B (ಬಣ್ಣ: ಕೆಂಪು; )

ಸ್ಪಷ್ಟ ರೀತಿಯಲ್ಲಿಆಪ್ಟಿಮೈಸೇಶನ್ ಬಣ್ಣವನ್ನು ಸರಿಸುವುದಾಗಿದೆ: ಪೋಷಕ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಕೆಂಪು ಘೋಷಣೆ, ಮತ್ತು ನಂತರ ಕ್ಯಾಸ್ಕೇಡ್ ನಮಗೆ ಉಳಿದದ್ದನ್ನು ಮಾಡುತ್ತದೆ. ಖಂಡಿತವಾಗಿಯೂ, ನಿಜವಾದ ಉದಾಹರಣೆಗಳುಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ, ಆದರೆ ಸಂಕ್ಷೇಪಣದಲ್ಲಿ "C" ನ ಸಾಧ್ಯತೆಗಳನ್ನು ನೀವು ಮರೆಯಬಾರದು ಎಂದು ಈ ಉದಾಹರಣೆಯು ತೋರಿಸುತ್ತದೆ CSS.

CSS ಸ್ಮಾರ್ಟ್ ಆಗಿದೆ ಮತ್ತು ನೀವು ಕೂಡ ಸ್ಮಾರ್ಟ್ ಆಗಿರಬೇಕು

ಆನುವಂಶಿಕ, ಆರಂಭಿಕ ಮತ್ತು ಪ್ರಸ್ತುತ ಬಣ್ಣಗಳ ಅರ್ಥಗಳ ತಿಳುವಳಿಕೆ ಕೊರತೆಯು ತುಂಬಾ ಸಾಮಾನ್ಯವಾಗಿದೆ. ಲಿಂಕ್‌ಗಳು ಮುಖ್ಯ ಪಠ್ಯದಂತೆಯೇ ಇರಬೇಕೆಂದು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದು ಹೇಳೋಣ (ಅವು ಈಗಾಗಲೇ ಸಾಕಷ್ಟು ಅಂಡರ್‌ಲೈನ್ ಮಾಡಲಾಗಿದೆ). ಇದನ್ನು ಹೇಗೆ ಮಾಡಬಾರದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

ಎ (ಬಣ್ಣ: ಕಪ್ಪು; /* ಇಲ್ಲ */)

ಈ ಪರಿಹಾರವು ವಿಫಲಗೊಳ್ಳುವ ಕಾರಣ ಸ್ಪಷ್ಟವಾಗಿದೆ: ನೀವು ದೇಹದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಲಿಂಕ್ ಬಣ್ಣವು ಅದರೊಂದಿಗೆ ಸಿಂಕ್ ಆಗುವುದಿಲ್ಲ. ನೀವು ವೇರಿಯಬಲ್ ಅನ್ನು ಬಳಸುವ ಬಗ್ಗೆ ಯೋಚಿಸಿದರೆ, ಅದು ವಿಷಯಗಳನ್ನು ಅನಗತ್ಯವಾಗಿ ಸಂಕೀರ್ಣಗೊಳಿಸುತ್ತದೆ. ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಲಿಂಕ್ ಅನ್ನು ಅಂಶದೊಳಗೆ ಇರಿಸಿದರೆ ಸ್ವಂತ ಶೈಲಿ(ಉದಾಹರಣೆಗೆ, ಉಲ್ಲೇಖದಲ್ಲಿ), ಅದು ಅದರ ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ.

ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು CSS ಅಂತರ್ನಿರ್ಮಿತ ಮಾರ್ಗವನ್ನು ಹೊಂದಿದೆ, ಆನುವಂಶಿಕ ಮೌಲ್ಯ:

ಎ (ಬಣ್ಣ: ಆನುವಂಶಿಕವಾಗಿ; /* ಹೌದು! */)

ಅಂತೆಯೇ, ಆಸ್ತಿಯನ್ನು ಅದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಕ್ಕೆ ಹಿಂತಿರುಗಿಸುವಾಗ, ಮೌಲ್ಯವನ್ನು ಸ್ಥಿರ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುವುದು ಕೆಟ್ಟ ಕಲ್ಪನೆ. CSS ನಲ್ಲಿ ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ ಆರಂಭಿಕ ಮೌಲ್ಯವಿದೆ. ಸಾಮಾನ್ಯವಾಗಿ ಇದು ಸ್ಥಿರ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸುವುದಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿರುವುದಿಲ್ಲ, ಆದರೆ ಇದು ನಿಜವಾಗಿಯೂ ಒಂದು ಪಾತ್ರವನ್ನು ವಹಿಸಿದಾಗ ಸಂದರ್ಭಗಳಿವೆ, ಉದಾಹರಣೆಗೆ, ಪಠ್ಯದ ದಿಕ್ಕನ್ನು ನಿರ್ಧರಿಸುವಾಗ ಪಠ್ಯ-ಜೋಡಣೆ ಆಸ್ತಿ. ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಮರುಹೊಂದಿಸುವಾಗ, ಎಡ ಮೌಲ್ಯವು RTL ಭಾಷೆಗಳಲ್ಲಿ ಪಠ್ಯವನ್ನು ಭ್ರಷ್ಟಗೊಳಿಸಬಹುದು (ಬಲದಿಂದ ಎಡಕ್ಕೆ), ಔಟ್‌ಪುಟ್ ಆರಂಭಿಕವಾಗಿರುತ್ತದೆ (ಇನ್ನೂ ಉತ್ತಮ ಪ್ರಾರಂಭವಾಗಿದೆ , ಆದರೆ ಈ ಮೌಲ್ಯವು IE9 ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ)/.

ಪಟ್ಟಿಯಲ್ಲಿ ಕೊನೆಯದು, ಆದರೆ ಕನಿಷ್ಠ ಪ್ರಮುಖ ಮೌಲ್ಯವಲ್ಲ ಪ್ರಸ್ತುತ ಬಣ್ಣ , ಅನೇಕ ಅಭಿವರ್ಧಕರು ಅದರ ಬಗ್ಗೆ ತಿಳಿದಿಲ್ಲ. ನೀವು ಅವರಲ್ಲಿ ಒಬ್ಬರಾಗಿದ್ದರೆ, ಚಿಂತಿಸಬೇಡಿ, ನಿಮ್ಮನ್ನು ಕೇಳಿಕೊಳ್ಳಿ: "ನೀವು ಅಂಶಗಳ ಗಡಿ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ, ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಂಶದ ಫಾಂಟ್ ಬಣ್ಣಕ್ಕೆ ಏಕೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ?" ಹೌದು, ಇದು ಸಂಭವಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಗಡಿ-ಬಣ್ಣದ ಆಸ್ತಿಯನ್ನು ಪ್ರಸ್ತುತ ಬಣ್ಣಕ್ಕೆ (ನಿರ್ದಿಷ್ಟತೆ) ಹೊಂದಿಸಲಾಗಿದೆ. ಒಪ್ಪುತ್ತೇನೆ, ಹೆಸರಿನಿಂದ ಎಲ್ಲವೂ ಸ್ಪಷ್ಟವಾಗಿದೆ.

ನನ್ನ ಅಭಿಪ್ರಾಯದಲ್ಲಿ, ನೀವು ಒಂದು ಅಂಶದ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ, ನೀವು ಸ್ಥಿರ ಮೌಲ್ಯ ಅಥವಾ ಸಾಸ್ ವೇರಿಯಬಲ್ ಬದಲಿಗೆ ಪ್ರಸ್ತುತ ಬಣ್ಣವನ್ನು ಬಳಸಬೇಕು.

ಎಲಿಮೆಂಟ್ (ಬಣ್ಣ: ಡೀಪ್‌ಪಿಂಕ್; ಗಡಿ: 1px ಘನ; /* ಬಣ್ಣವು `ಪ್ರಸ್ತುತ ಬಣ್ಣ' */ ನೊಂದಿಗೆ ಸೂಚ್ಯವಾಗಿದೆ .ಎಲಿಮೆಂಟ್ svg ( ಭರ್ತಿ: ಪ್ರಸ್ತುತ ಬಣ್ಣ; /* ಭರ್ತಿ ಬಣ್ಣವು ಪಠ್ಯದಂತೆಯೇ ಇರುತ್ತದೆ */ )

ಇವೆಲ್ಲವೂ ಮೂಲಭೂತವಾಗಿವೆ ಸಿಎಸ್ಎಸ್ ವೈಶಿಷ್ಟ್ಯಗಳು. ಅವರು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ರೀತಿಯಲ್ಲಿ ಮಾಡುತ್ತಾರೆ. ಮತ್ತು ಈ ಅವಕಾಶಗಳನ್ನು ಆಶ್ಚರ್ಯಕರವಾಗಿ ವಿರಳವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ, ನೀವು ಘಟಕ ಕೋಡ್ ಅನ್ನು ಸುಧಾರಿಸಲು ನಿರ್ಧರಿಸಿದರೆ, ನೀವು ಅವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಾರದು.

ನಿಮ್ಮ ಜಿಟ್ ಚೆನ್ನಾಗಿರಬೇಕು

ಸಿಎಸ್ಎಸ್ ಕೋಡ್ಬೇಸ್ ಅನ್ನು ಮರುಫಲಕ ಮಾಡುವುದು ಬಹಳಷ್ಟು ಕೆಲಸವಾಗಿದೆ. ನೀವು ಡಜನ್ಗಟ್ಟಲೆ ಫೈಲ್‌ಗಳನ್ನು ನವೀಕರಿಸಬೇಕಾಗುತ್ತದೆ. ಮತ್ತು ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ನೀವು ಏನನ್ನಾದರೂ ಮುರಿಯುವ ಸಾಧ್ಯತೆಯಿದೆ. ನಾವು ಪ್ರಾಮಾಣಿಕವಾಗಿರಲಿ - ಪ್ರತಿಯೊಬ್ಬರೂ ತಪ್ಪುಗಳನ್ನು ಮಾಡುತ್ತಾರೆ ಮತ್ತು ನೀವು ಅಂತಹ ಕೆಲಸವನ್ನು ಕೆಲವು ಸಣ್ಣ ತಪ್ಪುಗಳಿಲ್ಲದೆ ಪೂರ್ಣಗೊಳಿಸಿದರೆ ಅದು ನಂಬಲಾಗದಷ್ಟು ತಂಪಾಗಿರುತ್ತದೆ.

ಆದ್ದರಿಂದ, ನಿಮ್ಮ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ನೀವು ಶ್ರದ್ಧೆಯಿಂದ ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ನಾನು ಬಲವಾಗಿ ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ (Git ಈ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ ಎಂದು ಊಹಿಸುವುದು ತಾರ್ಕಿಕವಾಗಿದೆ). ಇದರರ್ಥ ಎಲ್ಲಾ ಕಮಿಟ್‌ಗಳು ಒಂದೇ ಕೆಲಸವನ್ನು ಮಾಡುತ್ತವೆ - ನೀವು ಸಂಘರ್ಷದಿಂದ ಬಳಲದೆ ದೋಷದೊಂದಿಗೆ ಕೋಡ್‌ನಿಂದ ಒಂದು ಹೆಜ್ಜೆ ಹಿಂದಕ್ಕೆ ಹೋಗುತ್ತೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಅನೇಕ ಜನರು Git ಅನ್ನು ಸಂಕೀರ್ಣ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರವೆಂದು ಕಂಡುಕೊಳ್ಳುತ್ತಾರೆ ಮತ್ತು ಅದನ್ನು ಸುಲಭವಾಗಿ ಕಲಿಯುವ ವಿಧಾನಗಳು ಈ ಲೇಖನದ ವ್ಯಾಪ್ತಿಯನ್ನು ಮೀರಿವೆ ಎಂದು ನನಗೆ ತಿಳಿದಿದೆ. ನನ್ನನ್ನು ನಂಬಿರಿ: ನಿಮ್ಮ ಮೆದುಳು ಕುದಿಯಲು ನೀವು ಬಯಸದಿದ್ದರೆ ನಿಮ್ಮ Git ಇತಿಹಾಸವು ಕವಿತೆಯಂತಿರಬೇಕು.

ತೀರ್ಮಾನ

ಆದ್ದರಿಂದ, ಸಂಪೂರ್ಣ ಪಠ್ಯವನ್ನು ಓದಲು ತುಂಬಾ ಸೋಮಾರಿಯಾದವರಿಗೆ ನಾನು ಲೇಖನದ ಮುಖ್ಯ ಅಂಶಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ರೂಪಿಸುತ್ತೇನೆ:

CSS/Sass ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವುದು ಕಷ್ಟ ಏಕೆಂದರೆ ಬದಲಾವಣೆ ಅಥವಾ ಅಳಿಸುವಿಕೆಯ ಸಂಪೂರ್ಣ ಪರಿಣಾಮವನ್ನು ತಕ್ಷಣವೇ ನಿರ್ಣಯಿಸುವುದು ಕಷ್ಟ. CSS ತಂತಿಗಳು. ಇದು ಮುಖ್ಯವಾಗಿ CSS ನ ಕಳಪೆ ಪರೀಕ್ಷೆಯ ಕಾರಣದಿಂದಾಗಿರುತ್ತದೆ. ಆದ್ದರಿಂದ ನೀವು ಜಾಗರೂಕರಾಗಿರಬೇಕು.

ಲಿಂಟಿಂಗ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಸುಂದರವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಮಾಡಿ ಏಕೆಂದರೆ ಇದು ಭವಿಷ್ಯದಲ್ಲಿ ನಿಮ್ಮ ಜೀವನವನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಇದು ಕೂಡ ಉತ್ತಮ ಮಾರ್ಗಹೆಚ್ಚಿನ ಅಪಾಯವಿಲ್ಲದೆ ನಿಮ್ಮ ಕೋಡ್‌ನ ಸ್ಥಿತಿಯ ಅವಲೋಕನ (ಸಿಂಟ್ಯಾಕ್ಟಿಕ್ ಕೊಳೆಯನ್ನು ಸರಿಪಡಿಸುವುದು ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಾರದು).

ನಂತರ ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ವಿಧಾನದ ಪ್ರಕಾರ ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು ರೂಪಿಸಿ. ನೀವು ಯಾವುದನ್ನು ಆರಿಸಿಕೊಂಡರೂ ಅದನ್ನು ಅನುಸರಿಸುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ಯೋಜನೆಯು ಹಲವಾರು ಘಟಕಗಳನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ರಚನೆಯು ಉತ್ತಮ ಆರಂಭವಾಗಿದೆ. ಇಂಟರ್ಫೇಸ್ನ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಭಾಗಗಳನ್ನು ಹುಡುಕಿ ಮತ್ತು ಅವುಗಳ ಶೈಲಿಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಫೈಲ್ಗಳಾಗಿ ಸರಿಸಿ. ಈ ರೀತಿಯಲ್ಲಿ ದಸ್ತಾವೇಜನ್ನು ಬರೆಯಲು ಹಿಂಜರಿಯಬೇಡಿ ಪ್ರಕ್ರಿಯೆಯು ಹೋಗುತ್ತದೆಸುಲಭ ಮತ್ತು ನೀವು ಮುಂದೆ ಸಾಗುತ್ತಿರುವಂತೆ ನಿಮಗೆ ಅನಿಸುತ್ತದೆ.

ಒಮ್ಮೆ ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿದ ಮತ್ತು ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ವಿಂಗಡಿಸಿದ ನಂತರ, ಇದು CSS ಅನ್ನು ಸುಧಾರಿಸುವ ಸಮಯ. ನೀವು ಏನನ್ನು ತೆಗೆದುಹಾಕಬಹುದು ಎಂಬುದನ್ನು ಮೊದಲು ಪರಿಶೀಲಿಸಿ, ಏಕೆಂದರೆ ನಾವು ಯಾವಾಗಲೂ ಹೆಚ್ಚು ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ. ನಂತರ ಅದನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಪ್ರಯತ್ನಿಸಿ ಇದರಿಂದ ಅದು ಕಡಿಮೆ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಅದನ್ನು ಅತಿಯಾಗಿ ಮಾಡಬೇಡಿ! ನಿಮ್ಮ ಕೆಲಸವು ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು, ಅದನ್ನು ಹೆಚ್ಚಿಸುವುದು ಅಲ್ಲ. ಮೊದಲ ನೋಟದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿಲ್ಲದ ಯಾವುದನ್ನಾದರೂ ಕಾಮೆಂಟ್ ಮಾಡಲು ಮರೆಯಬೇಡಿ.

ಮತ್ತು ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ ಬದ್ಧತೆಗಳು ನಿಯಮಿತ ಮತ್ತು ತಾರ್ಕಿಕವಾಗಿರಬೇಕು. ಬದಲಾವಣೆಗಳನ್ನು ಸಣ್ಣ ಕಮಿಟ್‌ಗಳಾಗಿ ಸಂಯೋಜಿಸಿ, ಪ್ರತಿಯೊಂದೂ ಒಂದನ್ನು ಮಾಡುತ್ತದೆ ಸರಳ ವಿಷಯ- ನೀವು ಏನಾದರೂ ತಪ್ಪು ಮಾಡಿದರೆ ಬದಲಾವಣೆಗಳನ್ನು ಹಿಂತಿರುಗಿಸಲು ಇದು ನಿಮಗೆ ಸುಲಭವಾಗುತ್ತದೆ.

ಕೊನೆಯದಾಗಿ ಆದರೆ, ಎಲ್ಲವೂ ಮುಗಿದ ನಂತರ ಆಚರಿಸಲು ಮರೆಯಬೇಡಿ. ಶುಭವಾಗಲಿ!

5 ರಲ್ಲಿ 4

ಯೋಜನೆಯಲ್ಲಿ ಕೆಲಸ ಮಾಡಿದ ಸ್ವಲ್ಪ ಸಮಯದ ನಂತರ, ಫೈಲ್‌ಗಳಲ್ಲಿ ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುತ್ತಿದ್ದಾರೆ CSSಶೈಲಿಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಅವುಗಳನ್ನು ಬಳಸಲಾಗಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂದು ಖಚಿತವಾಗಿ ಹೇಳಲು ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು ತಂಡದಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ಮತ್ತು ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ವ್ಯಕ್ತಿಗಳು ಶೈಲಿಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ. ಅಥವಾ, ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಮುಂದೆ ಹಲವಾರು ಅಭಿವರ್ಧಕರು ಇದ್ದರು, ಮತ್ತು ನೀವು ಏನನ್ನಾದರೂ ಬದಲಾಯಿಸಲು ನಿರ್ಧರಿಸಿದ್ದೀರಿ ಅಥವಾ ಡಿಸೈನರ್ ಸಣ್ಣ ಮರುವಿನ್ಯಾಸವನ್ನು ಯೋಜಿಸಿದ್ದಾರೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಹಲವು ಆಯ್ಕೆಗಳಿವೆ, ಆದರೆ ಫಲಿತಾಂಶವು ಒಂದೇ ಆಗಿರುತ್ತದೆ - "ಡೆಡ್" ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬ್ರೌಸರ್ಗೆ ನೀಡಲಾಗುತ್ತದೆ.

ಅವುಗಳಲ್ಲಿ ಕೇವಲ ಒಂದು ಅಥವಾ ಎರಡು ಇದ್ದರೆ ಎಲ್ಲವೂ ಚೆನ್ನಾಗಿರುತ್ತದೆ, ಆದರೆ ನಿಮ್ಮ ಫೈಲ್ ಐದು ಅಥವಾ ಆರು ಸಾವಿರ ಸಾಲುಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದರ ಬಗ್ಗೆ ಯಾವುದೇ ಸಂದೇಹವಿಲ್ಲ - ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ, ಅಂದರೆ ಅನಗತ್ಯವಾದವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ನೀವು ಹಗುರಗೊಳಿಸಬಹುದು ಫೈಲ್‌ಗಳು ಮತ್ತು ಪುಟ ಲೋಡ್ ಅನ್ನು ವೇಗಗೊಳಿಸಿ. ಇಂದು ನಾವು ನೋಡೋಣ ವಿವಿಧ ಕಾರ್ಯಕ್ರಮಗಳು, ಅನಗತ್ಯ ಶೈಲಿಗಳಿಂದ CSS ಫೈಲ್‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು ಪ್ಲಗಿನ್‌ಗಳು ಮತ್ತು ಸೇವೆಗಳು.

ಫೈರ್‌ಫಾಕ್ಸ್ ವಿಸ್ತರಣೆಗಳು

ಮೂಲಕ ಪುಟದಲ್ಲಿ ಸೇರಿಸಲಾದ ಖಾತೆ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ , @ಆಮದು ಮತ್ತು. ಇದು ಒಂದೇ ಪುಟ ಮತ್ತು ಸಂಪೂರ್ಣ ಸೈಟ್ ಎರಡನ್ನೂ ವಿಶ್ಲೇಷಿಸಬಹುದು. ಕೊನೆಯಲ್ಲಿ ನೀವು ಸೈಟ್‌ನಲ್ಲಿ ಬಳಸದ ಆಯ್ಕೆಗಳ ಪಟ್ಟಿಯನ್ನು ಪಡೆಯುತ್ತೀರಿ.

ಇದು ಫೈರ್‌ಬಗ್‌ಗಾಗಿ ವಿಸ್ತರಣೆಯಾಗಿದ್ದು, ಇದು ಬಳಕೆಯಾಗದ ಆಯ್ಕೆಗಳನ್ನು ಹುಡುಕಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಪ್ರತ್ಯೇಕ ಪುಟ, ಮತ್ತು ಸೈಟ್ ಉದ್ದಕ್ಕೂ. ಪರಿಣಾಮವಾಗಿ, ನಿಮ್ಮ ಎಲ್ಲಾ ಆಯ್ಕೆಗಾರರ ​​ಪಟ್ಟಿಯನ್ನು ನೀವು ಸ್ವೀಕರಿಸುತ್ತೀರಿ, ಅದರಲ್ಲಿ ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ ಗುರುತಿಸಲಾದವುಗಳನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

ವೆಬ್ ಸೇವೆಗಳು

ಯಾವ ಆಯ್ಕೆದಾರರನ್ನು ಪರಿಶೀಲಿಸಲು ಆನ್‌ಲೈನ್ ಸಾಧನ ಈ ಫೈಲ್ಮೇಲೆ ಬಳಸಲಾಗಿಲ್ಲ ನಿರ್ದಿಷ್ಟ ಪುಟಗಳುಸೈಟ್. ತೊಂದರೆಯೆಂದರೆ ನೀವು ಸಂಪೂರ್ಣ ಸೈಟ್ ಅನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ (ಅಥವಾ ಬದಲಿಗೆ, ಇದು ಸಾಧ್ಯ, ಆದರೆ ಇದು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಮತ್ತು ಅನಾನುಕೂಲವಾಗಿದೆ).

ಡೆಸ್ಕ್‌ಟಾಪ್ ಸಂಪಾದಕರು

ಬಳಕೆಯಾಗದ CSS ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ಕಂಡುಹಿಡಿಯುವುದು ಎಂದು ತಿಳಿದಿರುವ ಕೋಡ್ ಸಂಪಾದಕರ ಪಟ್ಟಿ.

ಟಾಪ್ ಸ್ಟೈಲ್ (ಗೆಲುವು)

ಇದು ಪುಟಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸಹ ಕಾಣಬಹುದು, ಆದರೆ ಇದಕ್ಕಾಗಿ CSS ಫೈಲ್‌ಗಳಲ್ಲಿ ಯಾವುದೇ ವಿವರಣೆಯಿಲ್ಲ.

ಇಂಟೆಲ್ಲಿಜೆ ಐಡಿಯಾ (ವಿನ್, ಮ್ಯಾಕ್, ಲಿನಕ್ಸ್)

ಕ್ರಾಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಎಡಿಟರ್ ಅನ್ನು ಪ್ರಾಥಮಿಕವಾಗಿ ಜಾವಾದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ತೀರ್ಮಾನ

ನನ್ನ ಅಭಿಪ್ರಾಯದಲ್ಲಿ, ಇವುಗಳಲ್ಲಿ ಅತ್ಯಂತ ಯಶಸ್ವಿ ಸಾಧನವೆಂದರೆ ಡಸ್ಟ್ ಮಿ. ಸಂಪೂರ್ಣ ಸೈಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಒಂದು ನಿಮಿಷಕ್ಕಿಂತ ಕಡಿಮೆ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಅದರ ನಂತರ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಆಯ್ಕೆಗಾರರನ್ನು ಕಂಡುಹಿಡಿಯಬೇಕು ಮತ್ತು ತೆಗೆದುಹಾಕಬೇಕು.

ಅಂದಹಾಗೆ, ನಿಮ್ಮಲ್ಲಿ ಯಾರಾದರೂ ಈ ಪಟ್ಟಿಯಲ್ಲಿಲ್ಲದ ಸಂಪಾದಕ ಅಥವಾ ಸೇವೆಯನ್ನು ಬಳಸಿದರೆ, ನಂತರ ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ಬರೆಯಿರಿ, ನಾನು ಅದನ್ನು ಸೇರಿಸುತ್ತೇನೆ. ನಿಮ್ಮ ಗಮನಕ್ಕೆ ಎಲ್ಲರಿಗೂ ಧನ್ಯವಾದಗಳು ;-)

ರಚಿಸಿದ ಸೈಟ್ ನಿರಂತರವಾಗಿ ವಿಸ್ತರಿಸುತ್ತದೆ, ಮತ್ತು ಒಂದು ದಿನ ನೀವು ಅದರ CSS ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಎಷ್ಟು ಕಷ್ಟ ಎಂದು ತಿಳಿಯುವಿರಿ.

ನೀವು ಈಗಾಗಲೇ ಎದುರಿಸಿದ್ದರೆ ಇದೇ ಸಮಸ್ಯೆ, ನಂತರ ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಮತ್ತು ಅದನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ಸಮಯವಾಗಿದೆ. ಹಾಗೆ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ನಾವು 15 ಪರಿಕರಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ್ದೇವೆ. ಅವುಗಳಲ್ಲಿ ಕೆಲವು CSS ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇತರರು ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತಾರೆ.

1. ಟೈಪ್-ಒ-ಮ್ಯಾಟಿಕ್

ಟೈಪ್-ಒ-ಮ್ಯಾಟಿಕ್ ಎನ್ನುವುದು ಫೈರ್‌ಬಗ್ ಪ್ಲಗಿನ್ ಆಗಿದ್ದು ಅದು ವೆಬ್‌ಸೈಟ್ ಪುಟಗಳಲ್ಲಿ ಬಳಸಿದ ಫಾಂಟ್‌ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಬಹುದು. ಈ ಪ್ಲಗಿನ್ ಬಳಸಿದ ಫಾಂಟ್‌ಗಳ ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ಮಾಹಿತಿಯೊಂದಿಗೆ ಟೇಬಲ್ ರೂಪದಲ್ಲಿ ವರದಿಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ( ಕುಟುಂಬ, ಗಾತ್ರ, ಬಣ್ಣ ಮತ್ತು ಇನ್ನಷ್ಟು).

ವರದಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲಾಗಿದ್ದರೂ ಸಹ ಕೋಷ್ಟಕ ರೂಪ, ಶೈಲಿಯಲ್ಲಿ ಹೋಲುವ ಫಾಂಟ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಅಥವಾ ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ನೀವು ಈ ಪಟ್ಟಿಯನ್ನು ಸುಲಭವಾಗಿ ಸಂಪಾದಿಸಬಹುದು.

2.CSSCSS

ಉಪಕರಣವು ನಿಮ್ಮ CSS ಫೈಲ್‌ಗಳನ್ನು ನಕಲುಗಳಿಗಾಗಿ ವಿಶ್ಲೇಷಿಸುತ್ತದೆ. ಇದು ಕಡಿಮೆಯಾಗುತ್ತದೆ CSS ಗಾತ್ರಮತ್ತು ಭವಿಷ್ಯದಲ್ಲಿ ಅವರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿದೆ. ಉಪಕರಣವನ್ನು ಸ್ಥಾಪಿಸಲು ತುಂಬಾ ಸುಲಭ - ಇದು ರೂಬಿಗಾಗಿ ವಿಸ್ತರಣೆ ಪ್ಯಾಕೇಜ್ ಆಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಆಜ್ಞಾ ಸಾಲಿನಿಂದ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ.

3. ಸಿಎಸ್ಎಸ್ ಲಿಂಟ್

ನಿಮ್ಮ CSS ಕೋಡ್‌ನಲ್ಲಿನ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಈ ಉಪಕರಣವು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉಪಕರಣವು ಶೈಲಿಗಳ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ ಮತ್ತು ಅನುಮಾನಾಸ್ಪದ ಕೋಡ್‌ಗೆ ನಿಯಮಗಳ ಗುಂಪನ್ನು ಸಹ ಅನ್ವಯಿಸುತ್ತದೆ. ಎಲ್ಲಾ ನಿಯಮಗಳನ್ನು ಪ್ಲಗ್ ಮಾಡಬಹುದಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಅವುಗಳನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು.

4. ಸಿಎಸ್ಎಸ್ ಕಲರ್ಗಾರ್ಡ್

ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿರದ ಬಣ್ಣಗಳನ್ನು ಬಳಸಲು ಬಯಸುವ ಕ್ಲೈಂಟ್‌ಗಳನ್ನು ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಕಾಣುತ್ತೀರಿ. ಅಗತ್ಯವನ್ನು ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಕಲರ್‌ಗಾರ್ಡ್ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಬಣ್ಣದ ಯೋಜನೆಗಳು, ಮತ್ತು ನೀವು ಎರಡು ಒಂದೇ ಬಣ್ಣಗಳನ್ನು ಬಳಸಿದರೆ ನಿಮಗೆ ಎಚ್ಚರಿಕೆ ನೀಡುತ್ತದೆ.

5. ಸಿಎಸ್ಎಸ್ ಡಿಗ್

CSS ಡಿಗ್ ಎಂಬುದು ಪೈಥಾನ್‌ನಲ್ಲಿ ಬರೆಯಲಾದ ಸ್ಕ್ರಿಪ್ಟ್ ಆಗಿದ್ದು ಅದು ಸ್ಥಳೀಯವಾಗಿ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು CSS ಮೌಲ್ಯಗಳುಶೈಲಿಗಳು ನೆಲೆಗೊಂಡಿವೆಯೇ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ ಯಾವುದೇ ಸೈಟ್ ಪ್ರತ್ಯೇಕ ಫೈಲ್ಅಥವಾ ಪುಟ ಕೋಡ್‌ನಲ್ಲಿ. ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಲು, ಪ್ರಮಾಣೀಕರಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ಉಪಕರಣವು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

6. ನನ್ನ ಧೂಳು

ಡಸ್ಟ್-ಮಿ ಎಂಬುದು ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಒಪೇರಾಕ್ಕಾಗಿ ಪ್ಲಗಿನ್ ಆಗಿದ್ದು ಅದು ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಿಂದ ಬಳಕೆಯಾಗದ ಆಯ್ಕೆಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಉಪಕರಣವು ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ CSS ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಯಾವ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಲಾಗುತ್ತಿದೆ ಮತ್ತು ಯಾವುದು ಅನಗತ್ಯ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

7. Devilo.us

Devilo.us CSS ಕೋಡ್ ಅನ್ನು ಕುಗ್ಗಿಸಲು ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸುಧಾರಿತ ಎಂಜಿನ್ ಆಗಿದೆ, ಇದು ಈಗ CSS3 ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.

8. PurifyCSS

ತೊಡೆದುಹಾಕಲು ಉಪಕರಣವು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಬಳಕೆಯಾಗದ CSSವೆಬ್‌ಸೈಟ್ ಪುಟಗಳು ಅಥವಾ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿನ ಶೈಲಿಗಳು. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ನಲ್ಲಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಲಾದ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸಹ ಪತ್ತೆಹಚ್ಚಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಶೈಲಿ ಫೈಲ್‌ಗಳ ಗಾತ್ರವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸಂಕುಚಿತಗೊಳಿಸುತ್ತದೆ.

9. ಪರಮಾಣು CSS

ನಿಮ್ಮ CSS ಫೈಲ್‌ಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸಲು ಪರಮಾಣು CSS ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಪುಟ ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅವಲಂಬನೆಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಮಾಡುತ್ತದೆ.

10. ಕ್ಲೀನ್ CSS

CleanCSS ಬಹುಕ್ರಿಯಾತ್ಮಕ CSS ಆಪ್ಟಿಮೈಜರ್ ಆಗಿದೆ. ಉಪಕರಣವು ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಚಿಕ್ಕದಾಗಿ ಮಾಡುತ್ತದೆ. ನೀವು ಬರೆದ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು ವಿವಿಧ ಭಾಷೆಗಳು: javascript, json, python, html, ಇತ್ಯಾದಿ.

11. PubCSS

ಶೈಕ್ಷಣಿಕ ಪ್ರಕಟಣೆಗಳ ಪುಟಗಳಿಗಾಗಿ CSS ಕೋಡ್ ಅನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ಉಪಕರಣವು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಇದು ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಮುದ್ರಣ ಮತ್ತು ಪ್ರಕಟಣೆಗಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು CSS ಶೈಲಿಗಳ ಗ್ರಂಥಾಲಯವಾಗಿದೆ.

12.CSSO

CSSO (CSS ಆಪ್ಟಿಮೈಜರ್) ನಿಮ್ಮ CSS ಫೈಲ್‌ಗಳ ರಚನಾತ್ಮಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಸಾಧನವಾಗಿದೆ.

13. ಹೀಲಿಯಂ

ಹೀಲಿಯಂ ವೆಬ್‌ಸೈಟ್‌ನ ಎಲ್ಲಾ ಪುಟಗಳಲ್ಲಿ ಬಳಕೆಯಾಗದ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಗುರುತಿಸುವ ಸಾಧನವಾಗಿದೆ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಧಾರಿತವಾಗಿದೆ ಮತ್ತು ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ. ಹೀಲಿಯಂ ಸೈಟ್ ವಿಭಾಗದ URL ಗಳ ಪಟ್ಟಿಯನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ನಂತರ ಎಲ್ಲಾ ಶೈಲಿಗಳ ಪಟ್ಟಿಯನ್ನು ತಯಾರಿಸಲು ಪ್ರತಿ ಪುಟವನ್ನು ಪಾರ್ಸ್ ಮಾಡುತ್ತದೆ. ನಂತರ ಅದು ಬಳಕೆಯಾಗದ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ.

14. ಸ್ಟ್ರಿಪ್ ಕಾಮೆಂಟ್‌ಗಳು

ಸ್ಟ್ರಿಪ್ CSS ಕಾಮೆಂಟ್‌ಗಳು ಈ ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು ಹೆಚ್ಚು ಸರಳಗೊಳಿಸುತ್ತದೆ: CSS ಫೈಲ್‌ಗಳಿಂದ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು, ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು. ಇದು ಗಲ್ಪ್/ಗ್ರಂಟ್/ಬ್ರೊಕೊಲಿಗೆ ಪ್ಲಗಿನ್ ಆಗಿಯೂ ಲಭ್ಯವಿದೆ.

15. ಸಿಎಸ್ಎಸ್ ಕುಗ್ಗುತ್ತದೆ

ಮಾರ್ಕ್‌ಅಪ್‌ನ ಸ್ಥಿರತೆ ಮತ್ತು ಸ್ವರೂಪವನ್ನು ನಿರ್ವಹಿಸುವಾಗ CSS ಫೈಲ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಉಪಕರಣವು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಡಾಕ್ಯುಮೆಂಟ್‌ನಿಂದ ಸ್ಪೇಸ್‌ಗಳು ಮತ್ತು ಕಾಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಹಲವಾರು ಸಾಧನಗಳನ್ನು ಇದು ಹೊಂದಿದೆ.

ನೀವು ಯಾವುದೇ ಇತರ ಉಪಯುಕ್ತ CSS ಪರಿಕರಗಳನ್ನು ಮನಸ್ಸಿನಲ್ಲಿ ಹೊಂದಿದ್ದೀರಾ? ದಯವಿಟ್ಟು ಅವುಗಳನ್ನು ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳಿ!

ಲೇಖನದ ಅನುವಾದ " ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು 15 CSS ಪರಿಕರಗಳು” ಸೌಹಾರ್ದ ಯೋಜನೆಯ ತಂಡವು ಸಿದ್ಧಪಡಿಸಿದೆ