鍓嶆部锛氳璧穋ss锛屽嵃璞℃渶娣辩殑鏄垜鍒氭瘯涓氬紑濮嬩粠浜嬪墠绔紑鍙戝矖浣嶇殑鏃跺€欙紝浣滀负涓€涓壀鍥剧敺瀛╋紙cutpictureboy锛夛紝鍦ㄩ〉闈㈡帓鐗堝拰杩樺師涓骞挎硾浣跨敤璁捐鍥句娇鐢╟ss寮€鍙戦〉闈紝璁板緱涓€寮€濮嬫帴瑙︽渶澶氱殑鏄疊ootstrap锛堢敤鏉ュ紑鍙戝搷搴斿紡甯冨眬锛岀Щ鍔ㄨ澶囦紭鍏堢殑WEB锛夈€備絾鏄殢鐫€鍓嶇缂栫▼鐨勯閫熷彂灞曪紝鍑虹幇浜唀lement銆乤ntdesign绛変紭绉€鐨刄I搴擄紝瀵规瘮涔嬩笅鎰熻瀹＄編鐤插姵銆傝█褰掓浼狅紝css杩欏嚑骞村偓鐢熷嚭涓嶅皯鏂扮殑瑙ｅ喅鏂规锛屾瘮濡侰SSModules銆乻tyled-components锛坖s涓殑css锛夈€丗unctionalCSS銆丆SSatomicclasses銆丆SSsandbox绛夈€?.CSSModuleCSSModule锛屼綔涓洪【鍚嶆€濅箟锛屽氨鏄竴涓狢SS妯″潡涓轰粈涔堥渶瑕佹ā鍧楀寲锛熸垜浠煡閬擄紝鍩轰簬vue鍜宺eact寮€鍙慡PAweb搴旂敤锛屾湰璐ㄤ笂閮芥槸鐢卞涓粍浠舵惌寤鸿€屾垚锛屽氨鍍忔惌绉湪鐩栨埧瀛愪竴鏍枫€傚鏋滆繖鏃跺€欎袱涓粍浠剁殑鏍峰紡鍜岀被鍚嶉噸澶嶏紝宀備笉鏄啿绐佷簡锛熷悜涓婏紵涓轰簡瑙ｅ喅鍐茬獊锛岄渶瑕佹ā鍧楀寲銆傚湪娌℃湁鍛藉悕鍐茬獊鐨勬儏鍐典笅锛屾渶濂藉皢缁勪欢娌欑洅鍖栥€侰SSModule鏄疌SS妯″潡鍖栫殑瀹炵幇鏂瑰紡涔嬩竴銆侰SSModule鍦ㄦ墦鍖呮椂浼氬皢绫诲悕杞崲鎴愮被鍚嶃€備竴涓柊鐨勭被鍚嶅姞涓奾ash鍊硷紝鎸夌収鍛藉悕瑙勫垯锛岄槻姝ss绫诲悕鍐茬獊鐨勯棶棰樸€傪煈ㄢ€嶐煄撳偦鐡滃悓瀛︼細CSSModule鏄疺ue:scoped鏍峰紡鐨勫疄鐜版柟寮忓悧锛熺瓟锛氫笉鏄紝CSSScope鏄€氳繃闄愬埗浣滅敤鍩熷疄鐜扮殑锛屾牱寮忓湪鏈湴鐢熸晥锛屼笉鏄湡姝ｇ殑cssModule銆傛垜浠煡閬擄紝褰撲竴涓猻tyle鏍囩甯︽湁scoped灞炴€ф椂锛屽叾css鏍峰紡鍙兘鍦ㄥ綋鍓峍ue缁勪欢涓娇鐢紝鍏跺疄鐜板師鐞嗘槸閫氳繃PostCSS瀹炵幇鐨勶紝閫氳繃缁欏搴旂殑dom娣诲姞涓€涓睘鎬э紝涓篶ss娣诲姞涓€涓搴旂殑灞炴€elector鍚屾椂瀵瑰簲鍞竴鐨刣om锛屽涓嬪浘鍜宑ss妯″潡鏄浣曞疄鐜扮殑锛屼互vue涓轰緥锛屽浣曚娇鐢╟ss妯″潡webpack鐩存帴瀵煎叆vue-loader鐢ㄦ埛鏂囨。馃敆vue-cli3鎼缓-in锛屽紑绠卞嵆鍙洿鎺ヤ娇鐢紝鍙渶鍦╯tyle鏍囩涓爣璁癿odule锛屽嵆鍙湪缁勪欢Modules涓娇鐢–SS锛屾洿澶氭搷浣滆鏂囨。銆備娇鐢ㄦ枃妗ｃ€備笅闈㈢湅涓€涓婥SSModule鍦╒ue椤圭洰涓殑缂栬瘧鏁堟灉銆傛垜浠彲浠ョ湅鍒帮紝CSSModules浼氬湪鏈€缁堟瀯寤洪〉闈㈡椂鑷姩閲嶅懡鍚嶈绫汇€傛牴鎹甐ue鐨勫畼鏂规弿杩帮紝杩欎釜module灞炴€ф寚绀篤ueLoader灏咰SSModules閮ㄥ垎瀵硅薄浣滀负涓€涓悕涓?style鐨勮绠楀睘鎬ф敞鍏ュ埌缁勪欢涓€傜劧鍚庝綘灏卞彲浠ラ€氳繃妯℃澘涓殑鍔ㄦ€佺被缁戝畾鏉ヤ娇鐢ㄤ簡馃懆鈥嶐煄撻害閰掑悓瀛︼細浣犺CSSModule鏄疌SS妯″潡鍖栫殑涓€绉嶅疄鐜般€侰SS妯″潡鍖栬繕鏈夊叾浠栧疄鐜板悧锛熶竴浜涳紝姣斿BEM鐨勫懡鍚嶇害瀹氾紝杩樻湁涓嬩竴鑺傝浠嬬粛鐨凜SSinJS杩欓噷绠€鍗曚粙缁嶄竴涓婤EM馃尣寤朵几闃呰锛欳SSModulesUsageTutorialBEMOfficialSpecification2.CSSinJSCSSinJS锛屼綔涓洪【鍚嶆€濅箟锛屽氨鏄皢搴旂敤鐨凜SS鏍峰紡鍐欏湪JavaScript鏂囦欢涓紝浣跨敤JS璇█缂栧啓CSS锛屽寘鎷皢鍘熸枃浠舵浛鎹负.css銆?less銆?scss绛夊悗缂€銆傞€氳繃浣跨敤鏍囩妯℃澘es6璇硶鐨剆tring璇硶鏉ヤ负缁勪欢瀹氫箟css灞炴€э紝鎴戜滑涓嶉渶瑕佽缃甤lassName绫诲悕~鏉ョ湅鐪嬩笅闈㈢殑demo馃憞馃懇鈥嶐煄撻樋闆細styled-components鏄负React鑰岀敓鐨勶紝Canvue鍙互鐢ㄥ悧锛熺瓟锛氭槸鐨勶紝styled-components鍥㈤槦涓撻棬涓篤ue寮€鍙戜簡涓€涓獀ue-styled-components锛屽拰React鐨剆tyled-components鐢ㄦ硶闈炲父鐩镐技銆傚鏋滀綘鏈夊叴瓒ｏ紝浣犲彲浠ョ帺瀹冦€傜帺涓嶅ソ锛堜笉杩囪繖涓粨搴撯湪涔熸湁鐐瑰皬锛岀湅璧锋潵寰堝皬锛宻tyle-component鍐欒捣鏉ョ‘瀹炴湁鐐瑰埆鎵級浣嗘槸鎬绘劅瑙塁SS-in-JS浼氳秺鏉ヨ秺娴佽鏂囨。閾炬帴馃敆馃尣鎷撳睍锛歴tyled-components瀹樼綉3.CSS鍘熷瓙绫诲叾瀹炲緢鍙よ€侊紝鏈川涓婃槸涓€绉嶅啓鈥嬧€婥SS鐨勬€濊矾銆傜畝鑰岃█涔嬶紝灏辨槸鐢ㄥ師瀛愮被鏉ユ瀯閫犻€夋嫨鍣ㄣ€傛瘮濡傛垜浠畾涔変竴涓猙ase.css鏂囦欢锛岄噷闈㈠畾涔変簡鍏叡澶嶇敤搴﹂珮鐨剆elector锛屾瘮濡俶gt20锛堟潵鑷〃绀簃argin-top:20px锛夌瓑锛屽ソ澶勬槸寰堝鏄撴彁鍙栧鐢ㄤ唬鐮侊紝鎻愰珮澶嶇敤搴︿唬鐮佸鐢紝浣嗚繃搴︽娊璞′篃浼氬甫鏉ュ法澶х殑缁存姢鎴愭湰銆?.1TailwindTailwind瀹樼綉閾炬帴馃敆鍏跺疄鏈川涓婁篃鏄竴涓師瀛愮被鐨勬€濇兂锛屼竴涓被浠ｈ〃涓€涓狢SS灞炴€с€傚ソ澶勬槸鎶婄被鎷嗗垎鐨勮冻澶熺粏锛岀矑搴﹀皬锛屽緢濂斤紝寰堚€滃師瀛愨€濄€傚湪鍥藉寰堟祦琛岋紝鍥犱负鑷畾涔夊睘鎬у己锛岀被鍚嶈涔夊己锛屼綘鍐嶄篃涓嶇敤涓虹被鍚嶇殑鍙栬垗鍙戞剚浜嗭紙姣曠珶鎴戜滑涓€涓粍浠跺彲鑳介渶瑕乶涓被寮€鍙戯級锛屽畾鍒跺氨鍍忕Н鏈ㄤ竴鏍凤紝浣嗗浗鍐呬簤璁瘮杈冨ぇ銆傛棭鏈熺殑atomic绫诲湪鍥藉唴鍩烘湰閮芥槸琚柗鐨勶紝浣嗘槸2020骞翠互鍚庢€佸害鍙樹簡锛屼笅闈㈢湅demo銆傚畼鏂圭殑濡備綍瀹炵幇鍗＄墖鐨勪緥瀛愶紝涓€鐪嬪氨鏄竴澶у爢绫诲悕锛屼笉杩囩‘瀹炵湅鐫€绠€鍗曪紝鍙互鎼缓锛屽氨鏄矑搴﹀お灏忎簡~闂涔熸毚闇蹭簡锛屼笉濂借銆備娇鐢ㄤ娇鐢紝灏卞儚灏忔椂鍊欐嬁璧峰瓧鍏告煡璇嶄竴鏍凤紝tailwind涔︾殑閾炬帴璇锋煡鐪嬸煋栬疆瀛愮櫥闄嗗簲鐢紝鐩墠鐨則witter鏄熀浜巘ailwind鏀圭増鐨勶紝鎴戜滑鍦ㄦ帶鍒跺彴涓婂彲浠ユ竻妤氱殑鐪嬪埌锛屼笉杩囪繖涓疄楠屽杩樻槸鎸烘湁閽辩殑锛岃禐鍔╀簡vite鐨勫箍鍛婁綅馃尣寤朵几闃呰锛氬鈥嬧€嬩綍璇勪环CSS妗嗘灦TailwindCSS锛?.2bulmaBulma鏄竴涓厤璐圭殑銆佸紑婧愮殑鍩轰簬Flexbox甯冨眬鎶€鏈殑鐜颁唬CSS妗嗘灦銆傚垰寮€濮嬫帴瑙︾殑鏃跺€欙紝鍦ㄧぞ鍖虹湅鍒颁簡鍩轰簬Bulma鐨刅ue.js鐨勮交閲忕骇UI缁勪欢buefy銆傚畠瀹屽叏鍩轰簬CSS锛屼笉闇€瑕乯avascript銆傝繖涔熸槸浠栧拰boostrap鏈€澶х殑鍖哄埆銆備笉杩囩幇鍦ㄤ笉鏄緢涓绘祦锛岃繖閲屽氨涓嶅璇翠簡銆傛湁鍏磋叮鐨勫悓瀛﹀彲浠ヨ缁嗕簡瑙ｄ竴涓嬨€備綘鍙互鐪嬪埌涓嬮潰鐨勪緥瀛愩€傚涔犱娇鐢–SS妗嗘灦骞朵笉鏄渶缁堢洰鐨勩€傚畠鍙槸鎻愰珮鐢熶骇鍔涚殑宸ュ叿銆傚伐鍏风殑鐩殑鏄彁楂樻垜浠殑寮€鍙戞晥鐜囷紝鏈€缁堣祴鑳藉埌鎴戜滑鐨勪骇鍝佷笂锛屾墍浠ヤ笉鐢ㄥお鎷呭績浣犳槸鍚︾敤杩囪繖浜涙鏋躲€傛瘯绔燂紝浣犱笉鍙兘浣跨敤鎵€鏈夌殑妗嗘灦銆備篃灏辨槸璇达紝浜嗚В鍘熺悊涔熸槸鍙互鐨勶紝鍙互鎻愰珮鑷繁鐨勮鐭ヰ煂茶繘涓€姝ラ槄璇伙細CSSFrameworkBulmaTutorialhttps://buefy.org/4銆侰SSSandbox鏍峰紡闅旂鐨勪綔鐢ㄦ槸浜掍笉骞叉壈銆傚墠绔窡寰墠绔帴瑙︽瘮杈冨銆傛瘯绔熻淇濊瘉鍚勪釜闆嗘垚鐨勫簲鐢ㄩ鏍间簰涓嶅共鎵般€傚洜涓哄簲鐢ㄥ彲鑳芥槸鐢变笉鍚岀殑鍥㈤槦鎴愬憳寮€鍙戠殑锛屾墍浠ヤ細鍑虹幇绫诲悕鍐茬獊鏄緢姝ｅ父鐨勩€傛渶鏃╃殑瀹炵幇鏂瑰紡搴旇鏄痠frame锛宨frame鑷甫澶╃劧闅旂锛屼絾鏄繖绉嶆柟寮忔湁寰堝灞€闄愭€э紝鏈夊嚑鐐瑰拰鎴戜滑涓婇潰鎻愬埌鐨勪竴鏍凤紝姣斿scopedCSS锛氶€氳繃瀹氫箟灞炴€coped锛屽彲浠ョ粨鍚圖OMtree闄愬埗CSS鑼冨洿js鍜孋SSModule涓殑CSS浣跨敤宸ュ叿灏嗘牱寮忕紪璇戞垚鑴氭湰骞跺幓闄ead涓殑鏍囩锛氳繖涔熸槸qiankun锛堝井鍓嶇妗嗘灦锛夌殑csssandbox鐨勫師鐞嗭紝鏂板閫氳繃鍦ㄨ繍琛宻tyle/link鏍囩鏃惰褰曞瓙椤圭洰锛岃繖浜涙爣绛惧湪瀛愰」鐩嵏杞芥椂琚Щ闄ゃ€傞噸鏂版坊鍔犳柊鍔犺浇鐨勫瓙椤圭殑鏍囩锛屽疄鐜皊hadowDOM锛氬彲浠ョ悊瑙ｄ负dom涓殑dom锛屽畠鏄疻eb缁勪欢鐨勪竴涓噸瑕佸睘鎬э紝鍙互璁╅殣钘忕殑DOM鏍戜緷闄勪簬甯歌DOM鏍?缂虹偣鏄吋瀹规€ф瘮杈冧綆銆傚彲鎬滐紝鍙互鐪嬬湅鍏煎鐘舵€侌煍楌煂插欢浼搁槄璇伙細鐢╯hadowDOM璇蜂綘鍠濅竴鏉煃佃浣忎笁閬崀1.鐪嬪畬璁板緱缁欚煂查叡鐐逛釜璧烇紝馃憤鍔卞織2.鍏虫敞鍏紬鍙峰墠闈nd閭ｄ簺鏈夎叮鐨勪簨锛岃窡澶у鑱婁竴鑱婂墠绔殑瓒ｄ簨3.鏂囩珷鏀跺綍鍦℅ithubfrontendThings璋㈣阿Star鉁?/p>
