ಮೂಲಭೂತ CSS ನ ತತ್ವಗಳನ್ನು ಕಲಿಯುವಾಗ, ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮಾಡ್ಯುಲರ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಶೈಲಿಗಳನ್ನು ಬರೆಯಲು ಕಲಿಸಲಾಗುತ್ತದೆ. ಆದರೆ ಡೆವಲಪರ್ಗಳು ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಂದಿಗೆ ತೊಡಗಿಸಿಕೊಂಡಾಗ, ಶೈಲಿಗಳು ಅನಪೇಕ್ಷಿತ ಪ್ರದೇಶಗಳಲ್ಲಿ ಸೋರಿಕೆಯಾಗದಂತೆ UI ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸುವುದು ಅಸಾಧ್ಯವೆಂದು ಭಾವಿಸುತ್ತದೆ. ಈ ಸಮಸ್ಯೆಯು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ನೋಬಾಲ್ಸ್ ಸ್ವಯಂ-ನೆರವೇರಿಸುವ ಲೂಪ್ ಆಗಿ; ಒಂದು ಅಂಶ ಅಥವಾ ವರ್ಗಕ್ಕೆ ಸೈದ್ಧಾಂತಿಕವಾಗಿ ಸ್ಕೋಪ್ ಮಾಡಲಾದ ಶೈಲಿಗಳು ಅವುಗಳು ಸೇರದ ಸ್ಥಳವನ್ನು ತೋರಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ. ಇದು ಸೋರಿಕೆಯಾದ ಶೈಲಿಗಳನ್ನು ಅತಿಕ್ರಮಿಸಲು ಇನ್ನಷ್ಟು ನಿರ್ದಿಷ್ಟವಾದ ಆಯ್ಕೆಗಳನ್ನು ರಚಿಸಲು ಡೆವಲಪರ್ ಅನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ, ಅದು ನಂತರ ಆಕಸ್ಮಿಕವಾಗಿ ಜಾಗತಿಕ ಶೈಲಿಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ, ಮತ್ತು ಹೀಗೆ. BEM ನಂತಹ ಕಠಿಣ ವರ್ಗದ ಹೆಸರಿನ ಸಂಪ್ರದಾಯಗಳು ಈ ಸಮಸ್ಯೆಗೆ ಒಂದು ಸೈದ್ಧಾಂತಿಕ ಪರಿಹಾರವಾಗಿದೆ. BEM (ಬ್ಲಾಕ್, ಎಲಿಮೆಂಟ್, ಮಾರ್ಪಾಡು) ವಿಧಾನವು CSS ಫೈಲ್ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮತ್ತು ರಚನೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು CSS ತರಗತಿಗಳನ್ನು ಹೆಸರಿಸುವ ಒಂದು ವ್ಯವಸ್ಥಿತ ಮಾರ್ಗವಾಗಿದೆ. ಈ ರೀತಿಯ ನಾಮಕರಣ ಸಂಪ್ರದಾಯಗಳು ಅಂಶಗಳನ್ನು ಮತ್ತು ಅವುಗಳ ಸ್ಥಿತಿಯನ್ನು ವಿವರಿಸಲು ಡೊಮೇನ್ ಭಾಷೆಯನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೂಲಕ ಅರಿವಿನ ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದರೆ, ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೈಜ ಜಗತ್ತಿನಲ್ಲಿ, ಅದು ಯಾವಾಗಲೂ ಹಾಗೆ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ. ಆದ್ಯತೆಗಳು ಬದಲಾಗಬಹುದು ಮತ್ತು ಬದಲಾವಣೆಯೊಂದಿಗೆ, ಅನುಷ್ಠಾನವು ಅಸಮಂಜಸವಾಗುತ್ತದೆ. HTML ರಚನೆಯಲ್ಲಿನ ಸಣ್ಣ ಬದಲಾವಣೆಗಳಿಗೆ ಅನೇಕ CSS ವರ್ಗದ ಹೆಸರು ಪರಿಷ್ಕರಣೆಗಳು ಬೇಕಾಗಬಹುದು. ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಫ್ರಂಟ್-ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್ಗಳೊಂದಿಗೆ, BEM ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುವ ವರ್ಗದ ಹೆಸರುಗಳು ದೀರ್ಘ ಮತ್ತು ಅಸಮರ್ಥವಾಗಬಹುದು (ಉದಾ., ಅಪ್ಲಿಕೇಶನ್-ಬಳಕೆದಾರ-ಅವಲೋಕನ__ಸ್ಥಿತಿ--ದೃಢೀಕರಣವಾಗಿದೆ), ಮತ್ತು ಹೆಸರಿಸುವ ನಿಯಮಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಬದ್ಧವಾಗಿರದಿರುವುದು ಸಿಸ್ಟಮ್ನ ರಚನೆಯನ್ನು ಮುರಿಯುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅದರ ಪ್ರಯೋಜನಗಳನ್ನು ನಿರಾಕರಿಸುತ್ತದೆ. ಈ ಸವಾಲುಗಳನ್ನು ಗಮನಿಸಿದರೆ, ಡೆವಲಪರ್ಗಳು ಫ್ರೇಮ್ವರ್ಕ್ಗಳತ್ತ ಮುಖಮಾಡಿರುವುದು ಆಶ್ಚರ್ಯವೇನಿಲ್ಲ, Tailwind ಅತ್ಯಂತ ಜನಪ್ರಿಯ CSS ಫ್ರೇಮ್ವರ್ಕ್ ಆಗಿದೆ. ಶೈಲಿಗಳ ನಡುವೆ ಗೆಲ್ಲಲಾಗದ ನಿರ್ದಿಷ್ಟತೆಯ ಯುದ್ಧದಂತೆ ತೋರುವ ವಿರುದ್ಧ ಹೋರಾಡಲು ಪ್ರಯತ್ನಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, CSS ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು ಮತ್ತು ಸಂಪೂರ್ಣ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಖಾತರಿಪಡಿಸುವ ಸಾಧನಗಳನ್ನು ಬಳಸುವುದು ಸುಲಭವಾಗಿದೆ. ಡೆವಲಪರ್ಗಳು ಉಪಯುಕ್ತತೆಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಒಲವು ತೋರುತ್ತಾರೆ ಕೆಲವು ಡೆವಲಪರ್ಗಳು ಕ್ಯಾಸ್ಕೇಡ್ ಶೈಲಿಗಳನ್ನು ತಪ್ಪಿಸಲು ಉತ್ಸುಕರಾಗಿದ್ದಾರೆ ಎಂದು ನಮಗೆ ಹೇಗೆ ಗೊತ್ತು? ಇದು "ಆಧುನಿಕ" ಫ್ರಂಟ್-ಎಂಡ್ ಟೂಲಿಂಗ್ನ ಏರಿಕೆಯಾಗಿದೆ - ಸಿಎಸ್ಎಸ್-ಇನ್-ಜೆಎಸ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳಂತೆ - ಆ ಉದ್ದೇಶಕ್ಕಾಗಿ ವಿಶೇಷವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ನಿರ್ದಿಷ್ಟ ಘಟಕಗಳಿಗೆ ಬಿಗಿಯಾಗಿ ವ್ಯಾಪ್ತಿ ಹೊಂದಿರುವ ಪ್ರತ್ಯೇಕ ಶೈಲಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ತಾಜಾ ಗಾಳಿಯ ಉಸಿರಿನಂತೆ ತೋರುತ್ತದೆ. ಇದು ವಿಷಯಗಳನ್ನು ಹೆಸರಿಸುವ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ - ಇನ್ನೂ ಹೆಚ್ಚು ದ್ವೇಷಿಸುವ ಮತ್ತು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಮುಂಭಾಗದ ಕಾರ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ - ಮತ್ತು ಡೆವಲಪರ್ಗಳು CSS ಆನುವಂಶಿಕತೆಯ ಪ್ರಯೋಜನಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳದೆ ಅಥವಾ ನಿಯಂತ್ರಿಸದೆ ಉತ್ಪಾದಕರಾಗಲು ಅನುಮತಿಸುತ್ತದೆ. ಆದರೆ CSS ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ಡಿಚ್ ಮಾಡುವುದು ತನ್ನದೇ ಆದ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಭಾರೀ ಬಿಲ್ಡ್ ಕಾನ್ಫಿಗರೇಶನ್ಗಳು ಬೇಕಾಗುತ್ತವೆ ಮತ್ತು ಆಗಾಗ್ಗೆ ಘಟಕ ಮಾರ್ಕ್ಅಪ್ ಅಥವಾ ಎಚ್ಟಿಎಮ್ಎಲ್ನೊಂದಿಗೆ ವಿಚಿತ್ರವಾಗಿ ಬೆರೆಯುವ ಶೈಲಿಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಹೆಸರಿಸುವ ಸಂಪ್ರದಾಯಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸುವ ಬದಲು, ನಮಗಾಗಿ ಸೆಲೆಕ್ಟರ್ಗಳು ಮತ್ತು ಐಡೆಂಟಿಫೈಯರ್ಗಳನ್ನು ಸ್ವಯಂ ಉತ್ಪಾದಿಸಲು ನಾವು ಬಿಲ್ಡ್ ಟೂಲ್ಗಳನ್ನು ಅನುಮತಿಸುತ್ತೇವೆ (ಉದಾ., .jsx-3130221066), ಡೆವಲಪರ್ಗಳು ಮತ್ತು ಅದರಲ್ಲೇ ಮತ್ತೊಂದು ಹುಸಿ-ಭಾಷೆಯನ್ನು ಮುಂದುವರಿಸುವ ಅಗತ್ಯವಿದೆ. (ನಿಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳ ಬಳಕೆಯ ಪರಿಣಾಮಗಳು ಏನು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಅರಿವಿನ ಹೊರೆ ಈಗಾಗಲೇ ಸಾಕಾಗಲಿಲ್ಲ!) ಟೂಲಿಂಗ್ಗೆ ವರ್ಗಗಳನ್ನು ಹೆಸರಿಸುವ ಕೆಲಸವನ್ನು ಮತ್ತಷ್ಟು ಅಮೂರ್ತಗೊಳಿಸುವುದು ಎಂದರೆ ಡೆವಲಪರ್ ಟೂಲ್ಗಳಂತಹ ಲೈವ್ ಡೀಬಗ್ ಮಾಡುವಿಕೆಯನ್ನು ಬೆಂಬಲಿಸುವ ಸ್ಥಳೀಯ ಬ್ರೌಸರ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಸಂಕಲಿಸಲಾದ ನಿರ್ದಿಷ್ಟ ಅಪ್ಲಿಕೇಶನ್ ಆವೃತ್ತಿಗಳಿಗೆ ಮೂಲಭೂತ ಡೀಬಗ್ ಮಾಡುವಿಕೆಯನ್ನು ನಿರ್ಬಂಧಿಸಲಾಗುತ್ತದೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ CSS ಬರೆಯುವ "ನೋವು" ದಿಂದ ಓಡಿಹೋಗುವ ಸಲುವಾಗಿ - ವೆಬ್ ಈಗಾಗಲೇ ಒದಗಿಸುವುದನ್ನು ಅಮೂರ್ತಗೊಳಿಸಲು ನಾವು ಬಳಸುತ್ತಿರುವ ಪರಿಕರಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ನಾವು ಪರಿಕರಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಬೇಕಾಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯಗಳು ಬರವಣಿಗೆ ಪ್ರಮಾಣಿತ CSS ಅನ್ನು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ ಆದರೆ ನಮ್ಮಂತಹ ಡೆವಲಪರ್ಗಳಿಗೆ ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಮಗೆ ಕೆಲಸ ಮಾಡಲು ಹೆಚ್ಚಿನ ಶಕ್ತಿಯನ್ನು ನೀಡುತ್ತದೆ. CSS ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್ಗಳು ಒಂದು ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ, ಆದರೆ ಆಶ್ಚರ್ಯಕರವಾದ ಗಮನದ ಕೊರತೆಯನ್ನು ಪಡೆಯುವ ಮತ್ತೊಂದು ವೈಶಿಷ್ಟ್ಯವಿದೆ - ಆದರೂ ಅದು ಇತ್ತೀಚೆಗೆ ಬೇಸ್ಲೈನ್ ಹೊಂದಾಣಿಕೆಯಾಗಿರುವುದರಿಂದ ಈಗ ಬದಲಾಗುತ್ತಿದೆ. CSS @ಸ್ಕೋಪ್ ಅಟ್-ರೂಲ್ ನಾವು ಒಳಗೊಂಡಿರುವ ಶೈಲಿ-ಸೋರಿಕೆ-ಪ್ರೇರಿತ ಆತಂಕದ ವಿಧಕ್ಕೆ CSS @scope at-rule ಸಂಭಾವ್ಯ ಚಿಕಿತ್ಸೆ ಎಂದು ನಾನು ಪರಿಗಣಿಸುತ್ತೇನೆ, ಇದು ಅಮೂರ್ತತೆಗಳು ಮತ್ತು ಹೆಚ್ಚುವರಿ ನಿರ್ಮಾಣ ಸಾಧನಗಳಿಗಾಗಿ ಸ್ಥಳೀಯ ವೆಬ್ ಅನುಕೂಲಗಳನ್ನು ರಾಜಿ ಮಾಡಿಕೊಳ್ಳಲು ನಮ್ಮನ್ನು ಒತ್ತಾಯಿಸುವುದಿಲ್ಲ. "@ಸ್ಕೋಪ್ CSS ನಲ್ಲಿ-ನಿಯಮವು ನಿರ್ದಿಷ್ಟ DOM ಸಬ್ಟ್ರೀಗಳಲ್ಲಿನ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅತಿಕ್ರಮಿಸಲು ಕಷ್ಟಕರವಾದ ಅತಿ-ನಿರ್ದಿಷ್ಟ ಆಯ್ಕೆಗಳನ್ನು ಬರೆಯದೆಯೇ ಮತ್ತು ನಿಮ್ಮ ಆಯ್ಕೆದಾರರನ್ನು DOM ರಚನೆಗೆ ತುಂಬಾ ಬಿಗಿಯಾಗಿ ಜೋಡಿಸದೆಯೇ ಅಂಶಗಳನ್ನು ಗುರಿಪಡಿಸುತ್ತದೆ."- MDN
ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಆನುವಂಶಿಕತೆ, ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಅಥವಾ ಕಾಳಜಿಗಳ ಮೂಲಭೂತ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ತ್ಯಾಗ ಮಾಡದೆಯೇ ನಾವು ನಿರ್ದಿಷ್ಟ ನಿದರ್ಶನಗಳಲ್ಲಿ ಪ್ರತ್ಯೇಕವಾದ ಶೈಲಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬಹುದು.ಮುಂಭಾಗದ ಅಭಿವೃದ್ಧಿಯ ದೀರ್ಘಾವಧಿಯ ಮಾರ್ಗದರ್ಶಿ ತತ್ವವಾಗಿದೆ. ಜೊತೆಗೆ, ಇದು ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಕವರೇಜ್ ಹೊಂದಿದೆ. ವಾಸ್ತವವಾಗಿ, ಫೈರ್ಫಾಕ್ಸ್ 146 ಡಿಸೆಂಬರ್ನಲ್ಲಿ @ಸ್ಕೋಪ್ಗೆ ಬೆಂಬಲವನ್ನು ಸೇರಿಸಿತು, ಇದು ಮೊದಲ ಬಾರಿಗೆ ಬೇಸ್ಲೈನ್ ಹೊಂದಿಕೆಯಾಗುವಂತೆ ಮಾಡಿದೆ. @ಸ್ಕೋಪ್ ನಿಯಮದ ವಿರುದ್ಧ BEM ಮಾದರಿಯನ್ನು ಬಳಸುವ ಬಟನ್ ನಡುವಿನ ಸರಳ ಹೋಲಿಕೆ ಇಲ್ಲಿದೆ:
<ಶೈಲಿ> .button .button__text { /* ಬಟನ್ ಪಠ್ಯ ಶೈಲಿಗಳು */} .button .button__icon { /* ಬಟನ್ ಐಕಾನ್ ಶೈಲಿಗಳು */} .button--primary {primary button styles */}
<ಶೈಲಿ> @ಸ್ಕೋಪ್ (.primary-button) { span:ಮೊದಲ ಮಗು { /* ಬಟನ್ ಪಠ್ಯ ಶೈಲಿಗಳು */} span:last-child { /* ಬಟನ್ ಐಕಾನ್ ಶೈಲಿಗಳು */} }
@ಸ್ಕೋಪ್ ನಿಯಮವು ಕಡಿಮೆ ಸಂಕೀರ್ಣತೆಯೊಂದಿಗೆ ನಿಖರತೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಡೆವಲಪರ್ ಇನ್ನು ಮುಂದೆ ವರ್ಗದ ಹೆಸರುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಗಡಿಗಳನ್ನು ರಚಿಸಬೇಕಾಗಿಲ್ಲ, ಇದು ಸ್ಥಳೀಯ HTML ಅಂಶಗಳ ಆಧಾರದ ಮೇಲೆ ಆಯ್ಕೆದಾರರನ್ನು ಬರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಪ್ರಿಸ್ಕ್ರಿಪ್ಟಿವ್ CSS ವರ್ಗ ಹೆಸರಿನ ಮಾದರಿಗಳ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ವರ್ಗ ಹೆಸರು ನಿರ್ವಹಣೆಯ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ, @ ಸ್ಕೋಪ್ ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ CSS ಗೆ ಸಂಬಂಧಿಸಿದ ಭಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ. ಮೂಲ ಬಳಕೆ ಪ್ರಾರಂಭಿಸಲು, ನಿಮ್ಮ CSS ಗೆ @ಸ್ಕೋಪ್ ನಿಯಮವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಯಾವ ಶೈಲಿಗಳನ್ನು ಸ್ಕೋಪ್ ಮಾಡಲಾಗುವುದು ಎಂಬುದನ್ನು ರೂಟ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸೇರಿಸಿ: @ಸ್ಕೋಪ್ (<ಸೆಲೆಕ್ಟರ್>) { /* <ಸೆಲೆಕ್ಟರ್> ಗೆ ಸ್ಕೋಪ್ ಮಾಡಲಾದ ಶೈಲಿಗಳು */ }
ಆದ್ದರಿಂದ, ಉದಾಹರಣೆಗೆ, ನಾವು
@ಸ್ಕೋಪ್ (ನಾವ್) { NAV ವ್ಯಾಪ್ತಿಯೊಳಗೆ ಒಂದು { /* ಲಿಂಕ್ ಶೈಲಿಗಳು */}
a:ಸಕ್ರಿಯ { /* ಸಕ್ರಿಯ ಲಿಂಕ್ ಶೈಲಿಗಳು */}
a:active::ಮೊದಲು { /* ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ಗಾಗಿ ಹುಸಿ ಅಂಶದೊಂದಿಗೆ ಸಕ್ರಿಯ ಲಿಂಕ್ */}
@media (ಗರಿಷ್ಠ-ಅಗಲ: 768px) { ಒಂದು { /* ರೆಸ್ಪಾನ್ಸಿವ್ ಹೊಂದಾಣಿಕೆಗಳು */} } }
ಇದು ತನ್ನದೇ ಆದ, ಒಂದು ನೆಲದ ವೈಶಿಷ್ಟ್ಯವಲ್ಲ. ಆದಾಗ್ಯೂ, ಕಡಿಮೆ ಗಡಿಯನ್ನು ರಚಿಸಲು ಎರಡನೇ ವಾದವನ್ನು ಸ್ಕೋಪ್ಗೆ ಸೇರಿಸಬಹುದು, ಸ್ಕೋಪ್ನ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತಿಮ ಬಿಂದುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
/* ul ಒಳಗಿನ ಯಾವುದೇ ಅಂಶವು ಅನ್ವಯಿಸಲಾದ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ */ @ಸ್ಕೋಪ್ (nav) ನಿಂದ (ul) { ಒಂದು { ಫಾಂಟ್ ಗಾತ್ರ: 14px; } }
ಈ ಅಭ್ಯಾಸವನ್ನು ಡೋನಟ್ ಸ್ಕೋಪಿಂಗ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಮತ್ತು DOM ರಚನೆಗೆ ಬಿಗಿಯಾಗಿ ಜೋಡಿಸಲಾದ ಒಂದೇ ರೀತಿಯ, ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್ಗಳ ಸರಣಿಯನ್ನು ಒಳಗೊಂಡಂತೆ ಹಲವಾರು ವಿಧಾನಗಳನ್ನು ಬಳಸಬಹುದಾಗಿದೆ, ಒಂದು : ಹುಸಿ-ಸೆಲೆಕ್ಟರ್ ಅಲ್ಲ, ಅಥವಾ ವಿಭಿನ್ನ CSS ಅನ್ನು ನಿರ್ವಹಿಸಲು
ತೀರ್ಮಾನ ಟೈಲ್ವಿಂಡ್ನಂತಹ ಯುಟಿಲಿಟಿ-ಮೊದಲ CSS ಫ್ರೇಮ್ವರ್ಕ್ಗಳು ಮೂಲಮಾದರಿ ಮತ್ತು ಸಣ್ಣ ಯೋಜನೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಒಂದೆರಡು ಡೆವಲಪರ್ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಒಳಗೊಂಡಿರುವ ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ ಬಳಸಿದಾಗ ಅವುಗಳ ಪ್ರಯೋಜನಗಳು ತ್ವರಿತವಾಗಿ ಕಡಿಮೆಯಾಗುತ್ತವೆ. ಕಳೆದ ಕೆಲವು ವರ್ಷಗಳಲ್ಲಿ ಮುಂಭಾಗದ ಅಭಿವೃದ್ಧಿಯು ಹೆಚ್ಚು ಜಟಿಲವಾಗಿದೆ ಮತ್ತು CSS ಇದಕ್ಕೆ ಹೊರತಾಗಿಲ್ಲ. @ಸ್ಕೋಪ್ ನಿಯಮವು ಎಲ್ಲಾ ಚಿಕಿತ್ಸೆಯಾಗಿಲ್ಲದಿದ್ದರೂ, ಇದು ಸಂಕೀರ್ಣವಾದ ಉಪಕರಣದ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಆಯಕಟ್ಟಿನ ವರ್ಗದ ಹೆಸರಿನ ಸ್ಥಳದಲ್ಲಿ ಅಥವಾ ಜೊತೆಗೆ ಬಳಸಿದಾಗ, @ ಸ್ಕೋಪ್ ಅನ್ನು ನಿರ್ವಹಿಸಬಹುದಾದ CSS ಬರೆಯಲು ಸುಲಭ ಮತ್ತು ಹೆಚ್ಚು ಮೋಜಿನ ಮಾಡಬಹುದು. ಹೆಚ್ಚಿನ ಓದುವಿಕೆ
CSS @ಸ್ಕೋಪ್ (MDN) “CSS @scope”, ಜುವಾನ್ ಡಿಯಾಗೋ ರೊಡ್ರಿಗಸ್ (CSS-ಟ್ರಿಕ್ಸ್) Firefox 146 ಬಿಡುಗಡೆ ಟಿಪ್ಪಣಿಗಳು (Firefox) ಬ್ರೌಸರ್ ಬೆಂಬಲ (CanIUse) ಜನಪ್ರಿಯ CSS ಚೌಕಟ್ಟುಗಳು (CSS 2024 ರ ಸ್ಥಿತಿ) CSS ನಲ್ಲಿ "C": ಕ್ಯಾಸ್ಕೇಡ್", ಥಾಮಸ್ ಯಿಪ್ (CSS-ಟ್ರಿಕ್ಸ್) BEM ಪರಿಚಯ (BEM ಪಡೆಯಿರಿ)
