介绍两种CSS方法论
时间：2023-04-05 18:26:40
HTML5
鍓嶈█璇磋捣CSS鐨勫懡鍚嶈鑼冿紝澶у搴旇閮戒笉闄岀敓锛屾垨鑰呭簲璇ュ惉璇磋繃BEM銆侭EM鏄痀andex鍥㈤槦鎻愬嚭鐨勪竴绉岰SSClass鍛藉悕鏂瑰紡锛屾棬鍦ㄥ府鍔╁紑鍙戣€呭垱寤烘洿濂姐€佹洿涓€鑷寸殑CSS妯″潡銆侭EM灏嗛〉闈㈢殑绫诲悕鍒嗕负鍧楋紙Block锛夈€佸厓绱狅紙Element锛夈€佷慨楗扮锛圡odifier锛夈€傚潡锛氬潡鏄竴涓瑙夋垨璇箟鐨勬暣浣擄紝瀹冩槸涓€涓壒瀹氱殑銆佸敮涓€鐨勫厓绱狅紝渚嬪椤甸潰涓婄殑寮瑰嚭绐楀彛锛屾垨鎼滅储妗嗭紱鍏冪礌锛氫竴鑸涓烘槸鍧楃殑A缁勪欢锛屽厓绱犳瘮杈冧互鍏剁埗鍧楃殑鍧楀悕涓哄墠缂€锛屼緥濡傚脊绐楃殑鏍囬銆佸叧闂寜閽€佺‘璁ゆ寜閽紱淇グ绗︼紙Modifier锛夛細淇グ绗﹁〃绀虹壒瀹氬厓绱犵殑鐗瑰畾鐘舵€侊紝渚嬪锛屽叧闂寜閽樉绀洪紶鏍囨湭鏀剧疆鍜屾斁缃椂涓ょ鐘舵€併€傜幇鍦ㄧ敤Bootstrap鐨勫脊绐楃粍浠舵潵涓句釜鏇村叿浣撶殑渚嬪瓙锛氶紶鏍囪鏀剧疆鐨勭姸鎬佸拰娌℃湁琚斁缃殑鐘舵€佹槸鏈夊尯鍒殑銆備粠涓婇潰鐨勪緥瀛愬彲浠ョ湅鍑猴紝鍧楀拰鍏冪礌鐢变袱涓笅鍒掔嚎锛坃_锛夎繛鎺ワ紝鑰屽厓绱犲拰淇グ绗︾敱涓や釜杩炲瓧绗︼紙--锛夎繛鎺ャ€傚綋鐒讹紝浠婂ぉ鐨勬枃绔犱笉浼氬叧娉ㄤ粈涔堟槸BEM銆傚鏋滀綘涔嬪墠娌℃湁鎺ヨЕ杩嘊EM锛屽彲浠ヨ瘯鐫€鍘讳簡瑙ｅ畠锛屽湪椤圭洰涓灏濊瘯鍑犳锛屾劅鍙椾竴涓嬪畠鐨勯瓍鍔涖€傚彟澶栵紝缃戜笂宸茬粡鏈夊緢澶氫粙缁岯EM鐨勬枃绔犮€傚鏋滀綘鑰愬績鎼滅储锛屼綘涓€瀹氫細鎵惧埌浼樼鐨勬暀绋嬨€備粖澶╃殑鏂囩珷灏嗗垎浜袱绉嶄粙缁嶈緝灏戠殑CSS鏂规硶璁猴細SUITCSS鍜孲MACSS銆係UITCSS瀹樻柟鏂囨。锛歋UITCSSNamingConventions(https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)SUITCSS鏄竴绉嶅熀浜庣粍浠剁殑CSS鐨勬柟娉曡锛屽畠灏嗙被鏈夋湁涓ょ鍚嶇О锛氬伐鍏风被鍜岀粍浠剁被銆傚伐鍏稢SS涓湁寰堝鍥哄畾鐨勫伐鍏凤紝姣斿锛氬乏鍙虫诞鍔ㄣ€佹枃鏈埅鏂€佸瀭鐩村眳涓€︹€︺€傚伐鍏风被鐨勪綔鐢ㄦ槸甯姪绋嬪簭鍑忓皯涓€浜涢噸澶嶇殑浠ｇ爜锛屾彁渚涗竴鑷寸殑瀹炵幇銆傚懡鍚嶈鍒欙細u-[sm-|md-|lg-]<宸ュ叿绫诲悕>銆傚伐鍏风被浠-寮€澶达紝鍚庨潰鏄被鍚嶏紙绫诲悕浠ラ┘宄板懡鍚嶏級锛屼腑闂村彲浠ュ姞涓妔m銆乵d銆乴g绛夊搷搴斿紡瑙勫垯銆備妇涓牀瀛愶細馃憠LookMy鍗氬鐖辨姌鑵剧殑鍓嶇宸ョ▼甯堬紝娆㈣繋鍏虫敞鎴戠殑鍏紬鍙枫€屾洿澶歛mazingFrontend鈥?/p>
Component绫籆omponent绫荤敤鏉ユ弿杩板叿浣撶殑缁勪欢銆傜粍浠舵槸鍏蜂綋搴旂敤鐨勫熀鐭筹紝鍥犳缁勪欢鐨勮璁″挨涓洪噸瑕併€傚懡鍚嶈鍒欙細[
-][-descendantname][--modifier]锛岃繖绉嶅懡鍚嶆柟寮忓湪缂栧啓HTML鍜孋SS鏃舵湁鍑犱釜濂藉锛氭湁鍔╀簬鍖哄垎缁勪欢鐨勬牴鍏冪礌銆佸悗浠ｅ厓绱犲拰鐢ㄤ簬淇グ鐨勭被锛涘噺灏戣淇敼鐨勬鐜囩被鍚嶉噸澶嶏紱鍙互璁╃被鍚嶆洿璇箟鍖栵紱鎴戜滑鏉ョ湅鐪嬪懡鍚嶈鍒欏悇閮ㄥ垎鐨勫叿浣撲綔鐢細寮曞叆绗笁鏂归鏍肩殑绫诲悕锛屽彲浠ュ湪鑷繁鐨勭被鍚嶄腑鍔犱笂鍛藉悕绌洪棿銆備絾鏄紝濡傛灉浣犵殑涓氬姟涓病鏈夌涓夋柟鏍峰紡锛屼綘鍙互涓嶇敤鍛藉悕绌洪棿銆?sfq-Modal{}/*鎴戠殑寮圭獥缁勪欢*/.sfq-Button{}/*鎴戠殑鎸夐挳缁勪欢*/缁勪欢鍚嶇О缁勪欢鍚嶇О浣跨敤澶ч┘宄拌鍒欙紙棣栧瓧姣嶅ぇ鍐欓┘宄拌鍒欙紝PascalCase)鏉ュ懡鍚嶏紝浣跨敤杩欑鏂瑰紡涔熷彲浠ュ敖閲忛伩鍏嶅悓鍚嶆牱寮忕殑鍐茬獊銆?Modal{}... Componentname-descendantname缁勪欢鐨勫悗浠ｆ槸鎸囬檮灞炰簬璇ョ粍浠剁殑閮ㄥ垎锛屼緥濡傚脊鍑虹粍浠剁殑鏍囬锛屾寜閽瓑銆傚悗浠ｅ悕瀛椾娇鐢ㄩ┘宄板懡鍚嶆硶锛圕amelCase锛夊懡鍚嶃€?divclass="Modal">
娆㈣繋鍏虫敞X鐖辨姌鑵剧殑鍓嶇宸ョ▼甯堜滑锛屾杩庡叧娉ㄦ垜鐨勫叕浼楀彿銆婃洿绁炲鐨勫墠绔€?/div> 缁勪欢鍚嶁€斺€攎odifier淇グ绗︽槸涓€涓被鍚嶏紝琛ㄧず缁勪欢鐨勭壒瀹氱姸鎬併€備慨楗扮鍚嶇О涔熼噰鐢ㄥ皬椹煎嘲瑙勫垯鍛藉悕锛岄渶瑕佺敤涓や釜鐮存姌鍙凤紙--锛夌洿鎺ヤ笌缁勪欢鍚嶇О杩炴帴锛岃繖涓嶣EM鎬ц兘涓€鑷淬€?buttonclass="ButtonButton--default">鐐瑰嚮鍏虫敞鈥滄洿绮惧僵鐨勫墠绔€?/button>
鐐瑰嚮鍏虫敞鈥滄洿绮惧僵鐨勫墠绔€?/button>鍙橀噺鍚峉UITCSS闄や簡瀹氫箟浜嗗伐鍏风被鍜岀粍浠剁被涓ょ鍛藉悕鏂瑰紡澶栵紝杩樺畾涔変簡CSS鍙橀噺鐨勫懡鍚嶆柟寮忋€傚懡鍚嶈鍒欙細--缁勪欢鍚峓-鍚庝唬鍚峾--淇グ绗-(CSS灞炴€鍙橀噺鍚?銆?root{/*涓绘寜閽殑鑳屾櫙鑹?/--Button--default-backgroundColor:#909399;/*涓绘寜閽殑鑳屾櫙鑹?/--Button--primary-backgroundColor:#409EFF;}SUITCSS灏忕粨SUIT闄や簡瀹氫箟宸ュ叿绫诲拰缁勪欢绫荤殑鍛藉悕鏂瑰紡澶栵紝CSS杩樻彁渚涗簡瀹屾暣鐨勫熀纭€绫诲拰娴嬭瘯濂椾欢鏉ユ鏌ユ偍鐨凜SS绫诲悕鏄惁绗﹀悎瑙勮寖銆傚叿浣撲娇鐢ㄦ柟娉曡鍙傝€冨畼鏂规枃妗ｏ紙https://github.com/suitcss/suit锛夈€傚彲浠ヨSUITCSS鍦˙EM鐨勫熀纭€涓婅繘琛屼簡鏀硅繘锛屽挨鍏舵槸娌℃湁鍙屼笅鍒掔嚎鐨勮璁★紝鍦ㄥ瑙備笂姣擝EM婕備寒寰堝锛岃€屼笖鍚勭鍚嶅瓧閮芥槸椹煎嘲鍛藉悕锛岀渷鐣ヤ簡涓€浜涚煭妯嚎锛岃繖浣垮緱SUITCSS鐨勭被鍚嶅湪闀垮害涓婃瘮BEM鏇寸揣鍑戙€係MACSSSMACSS瀹樼綉锛歨ttp://smacss.com/SMACSS锛圫calableandModularArchitectureforCSS锛夋槸涓€濂楁槗浜庡紑鍙戙€佹槗浜庣淮鎶ょ殑CSS缂栧啓鏂规硶璁猴紝灏咰SS瑙勫垯鍒嗕负浜旂被锛欱ase锛坆asic)Layout(甯冨眬)Module(妯″潡)State(鐘舵€?Theme(涓婚)浣犵幇鏈夐」鐩殑鏍峰紡涓簲璇ヨ兘鎵惧埌浠ヤ笂浜旂被銆傝繖浜涙牱寮忕殑娣峰悎浣跨敤浼氳浣犵殑浠ｇ爜鐪嬭捣鏉ョ壒鍒鏉傘€傚鏋滀綘鏈夋剰璇嗗湴灏嗚繖浜涙牱寮忓垎缁勶紝澶嶆潅鎬т細澶уぇ闄嶄綆銆傞櫎浜嗗鏍峰紡杩涜鍒嗙被涔嬪锛岃繕鏈変竴浜涢€傜敤浜庢瘡涓被鍒殑鍑嗗垯銆傚熀鏈鍒欏熀鏈鍒欎綔鐢ㄤ簬鍏冪礌閫夋嫨鍣紝鐢ㄤ簬瀹氫箟HTML鏍囩鐨勯粯璁ゆ牱寮忋€傚熀鏈牱寮忎富瑕佺敤浜庤缃爣棰樺ぇ灏忋€侀粯璁ら摼鎺ラ鑹层€侀粯璁ゅ瓧浣撴牱寮忓拰姝ｆ枃鑳屾櫙绛夈€?*鍩烘湰鏍峰紡绀轰緥*/body,form{margin:0;濉厖锛?锛泒a{棰滆壊锛?039锛泒a锛氭偓鍋渰棰滆壊锛?03F锛泒甯冨眬瑙勫垯CSS鏈川涓婂氨鏄〉闈㈠厓绱犵殑甯冨眬锛屼絾鏄紝椤甸潰鐨勬瘡涓厓绱犱篃鏈変富娆′箣鍒嗐€傛瘮濡備互head銆乼ail杩欐牱鐨勫ぇ鍧椾负涓昏缁勪欢锛屾垜浠О涔嬩负Layout銆傚鑸爮锛堝睘浜庡ご閮級鍜岀綉绔欐弿杩帮紙灞炰簬灏鹃儴锛夋槸娆＄骇缁勪欢锛屾垜浠О涔嬩负妯″潡锛圡odule锛夈€備笅闈妇涓€涓叿浣撶殑妗堜緥鏉ョ湅涓€涓嬫帢閲戠殑椤甸潰甯冨眬锛氶〉闈笂鏈夐〉鐪夈€佸鑸爮銆佸唴瀹瑰尯鍜屼晶杈规爮锛岃繖浜涢兘鏄竷灞€鐨勪竴閮ㄥ垎銆係MACSS鍏佽鍦ㄥ竷灞€鏍峰紡涓娇鐢↖D閫夋嫨鍣紝杩欐湁鍔╀簬鍦℉TML涓竴鐩簡鐒跺湴鍖哄垎鑺傜偣鍦ㄥ竷灞€涓殑浣嶇疆銆傚叾浠栦笉鏄疘D閫夋嫨鍣ㄧ殑绫婚渶瑕佸姞涓妉-鍓嶇紑锛岃〃绀鸿繖涓睘浜庡竷灞€鏍峰紡銆?divid="header"> 