ମ basic ଳିକ CSS ର ନୀତିଗୁଡିକ ଶିଖିବାବେଳେ, ରକ୍ଷଣାବେକ୍ଷଣ ସୁନିଶ୍ଚିତ କରିବା ପାଇଁ ଜଣେ ମଡ୍ୟୁଲାର୍, ପୁନ us ବ୍ୟବହାରଯୋଗ୍ୟ ଏବଂ ବର୍ଣ୍ଣନାକାରୀ ଶ yles ଳୀ ଲେଖିବାକୁ ଶିଖାଯାଏ | କିନ୍ତୁ ଯେତେବେଳେ ଡେଭଲପର୍ମାନେ ବାସ୍ତବ ଦୁନିଆର ପ୍ରୟୋଗଗୁଡ଼ିକ ସହିତ ଜଡିତ ହୁଅନ୍ତି, ଅନିଚ୍ଛାକୃତ ଅଞ୍ଚଳରେ ଶ yles ଳୀ ବିନା UI ବ features ଶିଷ୍ଟ୍ୟ ଯୋଡିବା ଅସମ୍ଭବ ମନେ ହୁଏ | ଏହି ସମସ୍ୟା ପ୍ରାୟତ snow ତୁଷାରପାତକୁ ଏକ ଆତ୍ମନିର୍ଭରଶୀଳ ଲୁପରେ ପରିଣତ କରେ; ଶ yles ଳୀଗୁଡିକ ଯାହା ତତ୍ତ୍ୱଗତ ଭାବରେ ଗୋଟିଏ ଉପାଦାନ କିମ୍ବା ଶ୍ରେଣୀରେ ସ୍କୋପ୍ ହୋଇଛି, ସେମାନେ କେଉଁଠାରେ ନାହାଁନ୍ତି ଦେଖାଇବା ଆରମ୍ଭ କରନ୍ତି | ଏହା ଡେଭଲପର୍ଙ୍କୁ ଲିକ୍ ଶ yles ଳୀକୁ ନବଲିଖନ କରିବାକୁ ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଚୟନକର୍ତ୍ତା ସୃଷ୍ଟି କରିବାକୁ ବାଧ୍ୟ କରିଥାଏ, ଯାହା ପରେ ହଠାତ୍ ବିଶ୍ୱ ଶ yles ଳୀକୁ ନବଲିଖନ କରେ | କଠିନ ଶ୍ରେଣୀର ନାମ ସମ୍ମିଳନୀ, ଯେପରିକି BEM, ଏହି ସମସ୍ୟାର ଗୋଟିଏ ତତ୍ତ୍ୱଗତ ସମାଧାନ | BEM (ବ୍ଲକ, ଏଲିମେଣ୍ଟ, ମୋଡିଫାୟର୍) ପଦ୍ଧତି ହେଉଛି CSS ଫାଇଲଗୁଡ଼ିକ ମଧ୍ୟରେ ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟତା ଏବଂ ସଂରଚନା ନିଶ୍ଚିତ କରିବାକୁ CSS ଶ୍ରେଣୀର ନାମକରଣର ଏକ ବ୍ୟବସ୍ଥିତ ଉପାୟ | ଏହିପରି କନଭେନସନ୍ ନାମକରଣ କରିବା ଦ୍ elements ାରା ଉପାଦାନଗୁଡିକ ଏବଂ ସେମାନଙ୍କର ସ୍ଥିତିକୁ ବର୍ଣ୍ଣନା କରିବା ପାଇଁ ଡୋମେନ୍ ଭାଷା ବ୍ୟବହାର କରି ଜ୍ଞାନଗତ ଭାର ହ୍ରାସ ହୋଇପାରେ, ଏବଂ ଯଦି ସଠିକ୍ ଭାବରେ କାର୍ଯ୍ୟକାରୀ ହୁଏ, ବୃହତ ପ୍ରୟୋଗଗୁଡ଼ିକ ପାଇଁ ଶ yles ଳୀକୁ ବଜାୟ ରଖିବା ସହଜ କରିଥାଏ | ବାସ୍ତବ ଦୁନିଆରେ, ତଥାପି, ଏହା ସର୍ବଦା ସେପରି କାମ କରେ ନାହିଁ | ପ୍ରାଥମିକତା ପରିବର୍ତ୍ତନ ହୋଇପାରେ, ଏବଂ ପରିବର୍ତ୍ତନ ସହିତ, କାର୍ଯ୍ୟକାରିତା ଅସଙ୍ଗତ ହୋଇଯାଏ | HTML ସଂରଚନାରେ ଛୋଟ ପରିବର୍ତ୍ତନ ଅନେକ CSS ଶ୍ରେଣୀ ନାମ ସଂଶୋଧନ ଆବଶ୍ୟକ କରିପାରିବ | ଅତ୍ୟଧିକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ୍ ପ୍ରୟୋଗଗୁଡ଼ିକ ସହିତ, BEM ପ୍ୟାଟର୍ ଅନୁସରଣ କରୁଥିବା ଶ୍ରେଣୀ ନାମଗୁଡିକ ଲମ୍ବା ଏବଂ ଅସ୍ପଷ୍ଟ ହୋଇପାରେ (ଯଥା, ଆପ୍-ୟୁଜର୍-ଓଭରଭ୍ୟୁ __ ଷ୍ଟାଟସ୍ - ପ୍ରାମାଣିକିକରଣ), ଏବଂ ନାମକରଣ ନିୟମକୁ ସମ୍ପୂର୍ଣ୍ଣରୂପେ ପାଳନ ନକରିବା ସିଷ୍ଟମ୍ ର ସଂରଚନାକୁ ଭାଙ୍ଗେ, ଯାହା ଦ୍ its ାରା ଏହାର ଲାଭକୁ ଅଗ୍ରାହ୍ୟ କରେ | ଏହି ଚ୍ୟାଲେ challenges ୍ଜଗୁଡିକୁ ଦେଖିଲେ ଏହା ଆଶ୍ଚର୍ଯ୍ୟଜନକ ନୁହେଁ ଯେ ଡେଭଲପରମାନେ ଫ୍ରେମୱାର୍କକୁ ଫେରିଛନ୍ତି, ଟେଲୱିଣ୍ଡ ହେଉଛି ସବୁଠାରୁ ଲୋକପ୍ରିୟ CSS ଫ୍ରେମୱାର୍କ | ଶ yles ଳୀ ମଧ୍ୟରେ ଏକ ଅବିସ୍ମରଣୀୟ ନିର୍ଦ୍ଦିଷ୍ଟ ଯୁଦ୍ଧ ପରି ଦେଖାଯାଉଥିବା ଯୁଦ୍ଧ କରିବାକୁ ଚେଷ୍ଟା କରିବା ପରିବର୍ତ୍ତେ, CSS କ୍ୟାସକେଡ୍ ଛାଡି ଦେବା ଏବଂ ସଂପୂର୍ଣ୍ଣ ବିଚ୍ଛିନ୍ନତାକୁ ଗ୍ୟାରେଣ୍ଟି କରୁଥିବା ଉପକରଣ ବ୍ୟବହାର କରିବା ସହଜ ଅଟେ | ବିକାଶକାରୀମାନେ ଉପଯୋଗିତା ଉପରେ ଅଧିକ ନିର୍ଭରଶୀଳ | ଆମେ କିପରି ଜାଣିବା ଯେ କିଛି ବିକାଶକାରୀ କ୍ୟାସକେଡ୍ ଶ yles ଳୀକୁ ଏଡାଇବାକୁ ଆଗ୍ରହୀ? ଏହା ହେଉଛି “ଆଧୁନିକ” ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ଟୁଲିଂର ବୃଦ୍ଧି - ଯେପରିକି CSS-in-JS framework ାଞ୍ଚା - ସେହି ଉଦ୍ଦେଶ୍ୟ ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ ପରିକଳ୍ପିତ | ପୃଥକ ଶ yles ଳୀଗୁଡିକ ସହିତ କାର୍ଯ୍ୟ କରିବା ଯାହାକି ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନଗୁଡ଼ିକରେ ଦୃ ly ଭାବରେ ସ୍କୋପ୍ ହୋଇଛି ତାଜା ପବନର ନିଶ୍ୱାସ ପରି ମନେହୁଏ | ଏହା ଜିନିଷଗୁଡିକର ନାମକରଣର ଆବଶ୍ୟକତାକୁ ହଟାଇଥାଏ - ତଥାପି ସବୁଠାରୁ ଘୃଣିତ ଏବଂ ସମୟ ସାପେକ୍ଷ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ କାର୍ଯ୍ୟଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏ - ଏବଂ CSS ଉତ୍ତରାଧିକାରର ଲାଭକୁ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ବୁ understanding ି ନ ପାରି ବିକାଶକାରୀଙ୍କୁ ବିକାଶକାରୀ ହେବାକୁ ଅନୁମତି ଦିଏ | କିନ୍ତୁ CSS କାସ୍କେଡ୍ ଖୋଳିବା ଏହାର ନିଜସ୍ୱ ସମସ୍ୟା ସହିତ ଆସିଥାଏ | ଉଦାହରଣ ସ୍ .ରୁପ, ଜାଭାସ୍କ୍ରିପ୍ଟରେ ଶ yles ଳୀ ରଚନା କରିବା ପାଇଁ ଭାରୀ ବିନ୍ୟାସ ସଂରଚନା ଆବଶ୍ୟକ ହୁଏ ଏବଂ ପ୍ରାୟତ comp ଉପାଦାନ ମାର୍କଅପ୍ କିମ୍ବା HTML ସହିତ ଶ yles ଳୀକୁ ଅଶୁଭ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରିଥାଏ | ନାମକରଣ ନିୟମାବଳୀକୁ ଯତ୍ନର ସହ ବିଚାର କରିବା ପରିବର୍ତ୍ତେ, ଆମେ ଆମ ପାଇଁ ଚୟନକର୍ତ୍ତା ଏବଂ ପରିଚାୟକ (ଯଥା। (ଯେପରି ତୁମର ସମସ୍ତ ଉପାଦାନର ବ୍ୟବହାର ପ୍ରଭାବଗୁଡିକ ବୁ understanding ିବାର ଜ୍ଞାନଗତ ଭାର ପୂର୍ବରୁ ଯଥେଷ୍ଟ ନୁହେଁ!) ଟୁଲ୍ କରିବା ପାଇଁ କ୍ଲାସ୍ ନାମକରଣର କାର୍ଯ୍ୟକୁ ଅଧିକ ଅବକ୍ଷୟ କରିବା ଅର୍ଥ ହେଉଛି ଯେ ମ basic ଳିକ ତ୍ରୁଟି ନିବାରଣ ପ୍ରାୟତ development ବିକାଶ ପାଇଁ ସଂକଳିତ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ରୟୋଗ ସଂସ୍କରଣରେ ବାଧିତ ହୋଇଥାଏ, ଏହା ପରିବର୍ତ୍ତେ ଡେଭଲପର୍ ଟୁଲ୍ ଭଳି ଲାଇଭ୍ ଡିବଗିଂକୁ ସମର୍ଥନ କରୁଥିବା ଦେଶୀ ବ୍ରାଉଜର୍ ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ | ଏହା ପ୍ରାୟତ like ଯେପରି ୱେବ୍ ପୂର୍ବରୁ ପ୍ରଦାନ କରୁଥିବା ଅବଷ୍ଟ୍ରାକ୍ଟ କରିବାକୁ ଆମେ ବ୍ୟବହାର କରୁଥିବା ଉପକରଣଗୁଡ଼ିକୁ ଡିବଗ୍ କରିବା ପାଇଁ ଉପକରଣଗୁଡିକ ବିକାଶ କରିବା ଆବଶ୍ୟକ - ମାନକ CSS ଲେଖିବାର “ଯନ୍ତ୍ରଣା” ରୁ ଦୂରେଇ ରହିବା ପାଇଁ | ସ uck ଭାଗ୍ୟବଶତ modern, ଆଧୁନିକ CSS ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ କେବଳ ଲେଖା ମାନକ CSS କୁ ଅଧିକ ନମନୀୟ ନୁହେଁ ବରଂ ଆମ ପରି ଡେଭଲପର୍ମାନଙ୍କୁ କ୍ୟାସକେଡ୍ ପରିଚାଳନା ଏବଂ ଏହା ଆମ ପାଇଁ କାମ କରିବା ପାଇଁ ଅଧିକ ଶକ୍ତି ପ୍ରଦାନ କରିଥାଏ | CSS କ୍ୟାସକେଡ୍ ସ୍ତରଗୁଡିକ ଏକ ଉତ୍ତମ ଉଦାହରଣ, କିନ୍ତୁ ଅନ୍ୟ ଏକ ବ feature ଶିଷ୍ଟ୍ୟ ଅଛି ଯାହା ଧ୍ୟାନର ଏକ ଆଶ୍ଚର୍ଯ୍ୟଜନକ ଅଭାବ ପାଇଥାଏ - ଯଦିଓ ତାହା ବର୍ତ୍ତମାନ ବଦଳୁଛି ଯେହେତୁ ଏହା ବର୍ତ୍ତମାନ ବେସ୍ ଲାଇନ୍ ସୁସଙ୍ଗତ ହୋଇଛି | CSS @scope At-Rule | ମୁଁ CSS @scope at-rule କୁ ଶ style ଳୀ-ଲିକ୍-ଉଦ୍ବେଗଜନକ ଚିନ୍ତାଧାରା ପାଇଁ ଏକ ସମ୍ଭାବ୍ୟ ଉପଚାର ବୋଲି ବିବେଚନା କରେ, ଯାହା ଆମକୁ ଅବଷ୍ଟ୍ରାକ୍ଟ ଏବଂ ଅତିରିକ୍ତ ନିର୍ମାଣ ଉପକରଣ ପାଇଁ ଦେଶୀ ୱେବ୍ ସୁବିଧାକୁ ସାମ୍ନା କରିବାକୁ ବାଧ୍ୟ କରେ ନାହିଁ | “@Scope CSS at-rule ଆପଣଙ୍କୁ ନିର୍ଦ୍ଦିଷ୍ଟ DOM ସବଟ୍ରିରେ ଉପାଦାନଗୁଡିକ ବାଛିବାରେ ସକ୍ଷମ କରେ, ଅତ୍ୟଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଚୟନକର୍ତ୍ତା ଲେଖିବା ବିନା ଉପାଦାନଗୁଡ଼ିକୁ ସଠିକ୍ ଭାବରେ ଟାର୍ଗେଟ୍ କରେ ଯାହା ଓଭରବ୍ରିଡ୍ କରିବା କଷ୍ଟକର, ଏବଂ ଆପଣଙ୍କ ଚୟନକର୍ତ୍ତାଙ୍କୁ DOM ସଂରଚନା ସହିତ ଯୋଡି ନକରି |” - MDN
ଅନ୍ୟ ଶବ୍ଦରେ, ଆମେ ଉତ୍ତରାଧିକାରୀ, କ୍ୟାସକେଡିଂ, କିମ୍ବା ଚିନ୍ତାଧାରାର ମ separate ଳିକ ପୃଥକତା ବିନା ନିର୍ଦ୍ଦିଷ୍ଟ ପରିସ୍ଥିତିରେ ପୃଥକ ଶ yles ଳୀ ସହିତ କାର୍ଯ୍ୟ କରିପାରିବା |ଯାହା ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ବିକାଶର ଏକ ଦୀର୍ଘ ଚାଲୁଥିବା ମାର୍ଗଦର୍ଶିକା ଅଟେ | ଏଥିସହ, ଏହାର ଉତ୍କୃଷ୍ଟ ବ୍ରାଉଜର୍ କଭରେଜ୍ ଅଛି | ବାସ୍ତବରେ, ଫାୟାରଫକ୍ସ 146 ଡିସେମ୍ବରରେ @ ସ୍କପ୍ ପାଇଁ ସମର୍ଥନ ଯୋଡିଥିଲା, ଯାହା ଏହାକୁ ପ୍ରଥମ ଥର ପାଇଁ ବେସଲାଇନ୍ ସୁସଙ୍ଗତ କରିଥିଲା | @ ସ୍କପ୍ ନିୟମ ବନାମ BEM ପ୍ୟାଟର୍ ବ୍ୟବହାର କରି ଏକ ବଟନ୍ ମଧ୍ୟରେ ଏଠାରେ ଏକ ସରଳ ତୁଳନା: <ବଟନ୍ ଶ୍ରେଣୀ = "ବଟନ୍ ବଟନ୍ - ପ୍ରାଥମିକ"> | | |
<ଷ୍ଟାଇଲ୍> .ବଟନ୍ .button__text {/ * ବଟନ୍ ପାଠ୍ୟ ଶ yles ଳୀ * /} .ବଟନ୍ .button__icon {/ * ବଟନ୍ ଆଇକନ୍ ଶ yles ଳୀ * /} .ବଟନ୍ - ପ୍ରାଥମିକ {ପ୍ରାଥମିକ ବଟନ୍ ଶ yles ଳୀ * /}
| <ବଟନ୍ ଶ୍ରେଣୀ = "ପ୍ରାଥମିକ-ବଟନ୍"> | ମୋତେ କ୍ଲିକ୍ କରନ୍ତୁ | → |
<ଷ୍ଟାଇଲ୍> @scope (.primary-button) { span: ପ୍ରଥମ-ଶିଶୁ {/ * ବଟନ୍ ପାଠ୍ୟ ଶ yles ଳୀ * /} span: ଶେଷ-ଶିଶୁ {/ * ବଟନ୍ ଆଇକନ୍ ଶ yles ଳୀ * /} }
@ ସ୍କପ୍ ନିୟମ କମ୍ ଜଟିଳତା ସହିତ ସଠିକତା ପାଇଁ ଅନୁମତି ଦିଏ | ଡେଭଲପର୍ ଆଉ ଶ୍ରେଣୀ ନାମ ବ୍ୟବହାର କରି ସୀମା ସୃଷ୍ଟି କରିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ, ଯାହା ପରବର୍ତ୍ତୀ ସମୟରେ, ସେମାନଙ୍କୁ ସ୍ଥାନୀୟ HTML ଉପାଦାନ ଉପରେ ଆଧାର କରି ଚୟନକର୍ତ୍ତା ଲେଖିବାକୁ ଅନୁମତି ଦେଇଥାଏ, ଯାହାଦ୍ୱାରା ପ୍ରେସକ୍ରିପଟିଭ୍ CSS ଶ୍ରେଣୀ ନାମ s ାଞ୍ଚାର ଆବଶ୍ୟକତାକୁ ଦୂର କରାଯାଇଥାଏ | କେବଳ ଶ୍ରେଣୀ ନାମ ପରିଚାଳନାର ଆବଶ୍ୟକତାକୁ ହଟାଇ, @ ସ୍କପ୍ ବଡ଼ ପ୍ରକଳ୍ପରେ CSS ସହିତ ଜଡିତ ଭୟକୁ ଦୂର କରିପାରିବ |
ମ Basic ଳିକ ବ୍ୟବହାର
ଆରମ୍ଭ କରିବା ପାଇଁ, ଆପଣଙ୍କର CSS ରେ @ ସ୍କୋପ୍ ନିୟମ ଯୋଡନ୍ତୁ ଏବଂ ଏକ ରୁଟ୍ ଚୟନକର୍ତ୍ତା ସନ୍ନିବେଶ କରନ୍ତୁ ଯେଉଁଥିରେ କେଉଁ ଶ yles ଳୀଗୁଡିକ ସ୍କପ୍ ହେବ:
@scope (
ତେଣୁ, ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ଆମେ ଏକ
@scope (nav) { ନାଭ ପରିସର ମଧ୍ୟରେ ଏକ {/ * ଲିଙ୍କ୍ ଶ yles ଳୀ * /} |
a: ସକ୍ରିୟ {/ * ସକ୍ରିୟ ଲିଙ୍କ୍ ଶ yles ଳୀ * /} |
a: ସକ୍ରିୟ :: ପୂର୍ବରୁ {/ * ଅତିରିକ୍ତ ଷ୍ଟାଇଲିଂ ପାଇଁ ଛଉ-ଉପାଦାନ ସହିତ ସକ୍ରିୟ ଲିଙ୍କ୍ * /} |
@ ମିଡିଆ (ସର୍ବାଧିକ-ମୋଟେଇ: 768px) { a {/ * ପ୍ରତିକ୍ରିୟାଶୀଳ ସଂଶୋଧନ * /} } }
ଏହା ନିଜେ ଏକ ଭୂମିପୂଜନ ବ feature ଶିଷ୍ଟ୍ୟ ନୁହେଁ | ଅବଶ୍ୟ, ଏକ ଦ୍ୱିତୀୟ ସୀମା ଏକ ନିମ୍ନ ସୀମା ସୃଷ୍ଟି କରିବାକୁ ପରିସର ସହିତ ଯୋଡି ହୋଇପାରେ, ପରିସରର ଆରମ୍ଭ ଏବଂ ଶେଷ ପଏଣ୍ଟକୁ ପ୍ରଭାବଶାଳୀ ଭାବରେ ବ୍ୟାଖ୍ୟା କରେ |
/ * ଉଲ୍ ଭିତରେ ଥିବା କ element ଣସି ଉପାଦାନରେ ଶ yles ଳୀ ପ୍ରୟୋଗ ହେବ ନାହିଁ * / @scope (nav) ରୁ (ul) { a { ଫଣ୍ଟ-ଆକାର: 14px; } }
ଏହି ଅଭ୍ୟାସକୁ ଡୋନାଟ୍ ସ୍କୋପିଂ କୁହାଯାଏ, ଏବଂ ସେଠାରେ ଅନେକ ଉପାୟ ଅଛି ଯାହାକୁ ବ୍ୟବହାର କରାଯାଇପାରେ, ସମାନ, ଅତ୍ୟଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଚୟନକର୍ତ୍ତାଙ୍କ DOM ସଂରଚନା ସହିତ ଯୋଡି ହୋଇ ରହିଥିବା ଏକ ସିରିଜ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି, a: ଛଦ୍ମ-ଚୟନକର୍ତ୍ତା ନୁହେଁ, କିମ୍ବା ଭିନ୍ନ CSS ପରିଚାଳନା କରିବା ପାଇଁ
|
ସିଦ୍ଧାନ୍ତ ୟୁଟିଲିଟି-ପ୍ରଥମ CSS framework ାଞ୍ଚା, ଯେପରିକି ଟେଲୱିଣ୍ଡ, ପ୍ରୋଟୋଟାଇପ୍ ଏବଂ ଛୋଟ ପ୍ରୋଜେକ୍ଟ ପାଇଁ ଭଲ କାମ କରେ | ସେମାନଙ୍କର ଲାଭ ଶୀଘ୍ର ହ୍ରାସ ହୁଏ, ଯଦିଓ, ଯେତେବେଳେ ଦୁଇରୁ ଅଧିକ ଡେଭଲପର୍ ସହିତ ଜଡିତ ବୃହତ ପ୍ରୋଜେକ୍ଟରେ ବ୍ୟବହୃତ ହୁଏ | ଗତ କିଛି ବର୍ଷ ମଧ୍ୟରେ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ବିକାଶ ଅଧିକ ଜଟିଳ ହୋଇପଡିଛି, ଏବଂ CSS ଏହାର ବ୍ୟତିକ୍ରମ ନୁହେଁ | ଯେତେବେଳେ @ ସ୍କପ୍ ନିୟମ ଏକ ଉପଶମ ନୁହେଁ, ଏହା ଜଟିଳ ସାଧନାର ଆବଶ୍ୟକତାକୁ ହ୍ରାସ କରିପାରେ | ଯେତେବେଳେ ଷ୍ଟ୍ରାଟେଜିକ୍ କ୍ଲାସ୍ ନାମକରଣ ସ୍ଥାନରେ କିମ୍ବା ବ୍ୟବହୃତ ହୁଏ, @ ସ୍କପ୍ ରକ୍ଷଣାବେକ୍ଷଣଯୋଗ୍ୟ CSS ଲେଖିବା ସହଜ ଏବଂ ଅଧିକ ମଜାଦାର କରିପାରେ | ପରବର୍ତ୍ତୀ ପଠନ |
CSS @scope (MDN) “CSS @scope”, ଜୁଆନ୍ ଡିଏଗୋ ରୋଡ୍ରିଗୁଏଜ୍ (CSS-Tricks) ଫାୟାରଫକ୍ସ 146 ରିଲିଜ୍ ଟିପ୍ପଣୀ (ଫାୟାରଫକ୍ସ) ବ୍ରାଉଜର୍ ସମର୍ଥନ (CanIUse) ଲୋକପ୍ରିୟ CSS ଫ୍ରେମୱାର୍କ (CSS 2024 ର ରାଜ୍ୟ) CSS ରେ “C”: କ୍ୟାସକେଡ୍ ”, ଥୋମାସ୍ ୟିପ୍ (CSS-Tricks) BEM ପରିଚୟ (BEM ପାଆନ୍ତୁ)
