docs__myblog__css__csslayered.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[36],{pGIc:function(e,n,a){"use strict";a.r(n);var t=a("q1tI"),l=a.n(t),r=a("dEAq"),i=a("H1Ra"),o=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"\u4e3a\u4ec0\u4e48\u8981\u5206\u5c42"},l.a.createElement(r["AnchorLink"],{to:"#\u4e3a\u4ec0\u4e48\u8981\u5206\u5c42","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e3a\u4ec0\u4e48\u8981\u5206\u5c42\uff1f"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"css \u8bed\u4e49\u5316\u7684\u547d\u540d\u7ea6\u5b9a\u548c css \u5c42\u7684\u5206\u79bb\uff0c\u5c06\u6709\u52a9\u4e8e\u4ed6\u7684\u53ef\u6269\u5c55\u6027\uff0c\u6027\u80fd\u7684\u63d0\u9ad8\u548c\u4ee3\u7801\u7684\u7ec4\u7ec7\u7ba1\u7406")),l.a.createElement("li",null,l.a.createElement("p",null,"\u5927\u91cf\u7684\u6837\u5f0f\u3001\u526f\u9ad8\u3001\u6743\u91cd\u548c\u5f88\u591a\u7684!important,\u5206\u597d\u5c42\u53ef\u4ee5\u8ba9\u56e2\u961f\u547d\u540d\u7edf\u4e00\u89c4\u8303\uff0c\u65b9\u4fbf\u7ef4\u62a4")),l.a.createElement("li",null,l.a.createElement("p",null,"\u6709\u8d23\u4efb\u611f\u7684\u53bb\u547d\u540d\u4f60\u7684\u9009\u62e9\u5668"))),l.a.createElement("h2",{id:"smacss"},l.a.createElement(r["AnchorLink"],{to:"#smacss","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"SMACSS"),l.a.createElement("p",null,"SMACSS(Scalable and Modular Architecture for CSS \u53ef\u6269\u5c55\u7684\u6a21\u5757\u5316\u67b6 \u6784\u7684 CSS)\u50cf OOCSS \u4e00\u6837\u4ee5\u51cf\u5c11\u91cd\u590d\u6837\u5f0f\u4e3a\u57fa\u7840\u3002\u7136\u800c SMACSS \u4f7f\u7528\u4e00\u5957\u4e94\u4e2a\u5c42 \u6b21\u6765\u5212\u5206 CSS \u7ed9\u9879\u76ee\u5e26\u6765\u66f4\u7ed3\u6784\u5316\u7684\u65b9\u6cd5:"),l.a.createElement("ul",null,l.a.createElement("li",null,"Base -\u8bbe\u5b9a\u6807\u7b7e\u5143\u7d20\u7684\u9884\u8bbe\u503c PS:html ","{","}"," input[type=text] ","{","}"),l.a.createElement("li",null,"Layout -\u6574\u4e2a\u7f51\u7ad9\u7684\u300c\u5927\u67b6\u6784\u300d\u7684\u5916\u89c2 PS:#header ","{"," margin: 30px 0; ","}"," Module -\u5e94\u7528\u5728\u4e0d\u540c\u2eda\u9762\u516c\u5171\u6a21\u5757 PS:.button","{","}"),l.a.createElement("li",null,"State -\u5b9a\u4e49\u5143\u7d20\u4e0d\u540c\u7684\u72b6\u6001 PS:.nav--main ","{"," .active ","{","}"," ","}"),l.a.createElement("li",null,"Theme - \u753b\u9762\u4e0a\u6240\u6709\u300c\u4e3b\u89c6\u89c9\u300d\u7684\u5b9a\u4e49 PS: border-color\u3001background-image \u4fee\u9970\u7b26\u4f7f\u7528\u7684\u662f--\uff0c\u5b50\u6a21\u5757\u4f7f\u7528__\u7b26\u53f7")),l.a.createElement(i["a"],{code:'<div class="container">\n  <div class="container-header">\n    <div class="container-header__title">\n      <h1 class="container-header__title--home"></h1>\n    </div>\n  </div>\n</div>',lang:"html"}),l.a.createElement("h2",{id:"bem"},l.a.createElement(r["AnchorLink"],{to:"#bem","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"BEM"),l.a.createElement("p",null,"BEM \u548c SMACCS \u975e\u5e38\u7c7b\u4f3c\uff0c\u4e3b\u8981\u7528\u6765\u5982\u4f55\u7ed9\u9879\u76ee\u547d\u540d\u3002\u4e00\u4e2a\u7b80\u5355\u547d\u540d\u66f4\u5bb9\u6613\u8ba9\u522b \u4eba\u4e00\u8d77\u5de5\u4f5c\u3002\u6bd4\u5982\u9009\u9879\u5361\u5bfc\u822a\u662f\u4e00\u4e2a\u5757(Block)\uff0c\u8fd9\u4e2a\u5757\u91cc\u7684\u5143\u7d20\u7684\u662f\u5176\u4e2d\u6807\u7b7e\u4e4b\u4e00 (Element)\uff0c\u800c\u5f53\u524d\u9009\u9879\u5361\u662f\u4e00\u4e2a\u4fee\u9970\u72b6\u6001(Modifier):"),l.a.createElement("ul",null,l.a.createElement("li",null,"block -\u4ee3\u8868\u4e86\u66f4\u9ad8\u7ea7\u522b\u7684\u62bd\u8c61\u6216\u7ec4\u4ef6"),l.a.createElement("li",null,"block__element -\u4ee3\u8868.block \u7684\u540e\u4ee3\uff0c\u7528\u4e8e\u5f62\u6210\u4e00\u4e2a\u5b8c\u6574\u7684.block \u7684\u6574\u4f53\u3002"),l.a.createElement("li",null,".block--modifier -\u4ee3\u8868.block \u7684\u4e0d\u540c\u72b6\u6001\u6216\u4e0d\u540c\u7248\u672c\u3002")),l.a.createElement("p",null,"\u4fee\u9970\u7b26\u4f7f\u7528\u7684\u662f_\uff0c\u5b50\u6a21\u5757\u4f7f\u7528__\u7b26\u53f7\u3002(\u4e0d\u7528\u4e00\u4e2a-\u7684\u539f\u56e0\u662f CSS \u5355\u8bcd\u8fde\u63a5)"),l.a.createElement(i["a"],{code:'<div class="menu">\n  <div class="menu__item"></div>\n  <div class="menu__item_state_current"></div>\n  <div class="menu__item"></div>\n</div>',lang:"html"}),l.a.createElement("h2",{id:"suit"},l.a.createElement(r["AnchorLink"],{to:"#suit","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"SUIT"),l.a.createElement("p",null,"Suit \u8d77\u6e90\u4e8e BEM\uff0c\u4f46\u662f\u5b83\u5bf9\u7ec4\u4ef6\u540d\u4f7f\u7528\u9a7c\u5cf0\u5f0f\u548c\u8fde\u5b57\u53f7\u628a\u7ec4\u4ef6\u4ece\u4ed6\u4eec\u7684\u4fee\u9970\u548c\u5b50\u5b59 \u540e\u4ee3\u4e2d\u533a\u5206\u51fa\u6765:"),l.a.createElement("p",null,"\u2022 \u4fee\u9970\u7b26\u4f7f\u7528\u7684\u662f\u2014\uff0c\u5b50\u6a21\u5757\u4f7f\u7528__\u7b26\u53f7\u3002(\u4e0d\u7528\u4e00\u4e2a-\u7684\u539f\u56e0\u662f CSS \u5355\u8bcd\u8fde\u63a5)"),l.a.createElement(i["a"],{code:".s-product-details {\n}\n.t-product-details {\n}\n.js-product-details {\n}",lang:"css"}),l.a.createElement("p",null,"\u7ed3\u6784\u5c5e\u6027\u5c06\u4f1a\u88ab\u5e94\u7528\u5230 s-product-details \u9009\u62e9\u5668\u4e2d\u3002\u4e3b\u9898\u5c5e\u6027\u5c06\u5e94\u7528\u4e8e t-product-details \u9009\u62e9\u5668\u3002"),l.a.createElement("h2",{id:"acss"},l.a.createElement(r["AnchorLink"],{to:"#acss","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"ACSS"),l.a.createElement("p",null,"\u8003\u8651\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u7cfb\u7edf\u7684\u63a5\u53e3\u3002\u539f\u5b50(Atoms)\u662f\u521b\u5efa\u4e00\u4e2a\u533a\u5757\u7684\u6700\u57fa\u672c\u7684\u7279\u8d28\uff0c \u6bd4\u5982\u8bf4\u8868\u5355\u6309\u94ae\u3002\u5206\u5b50(Molecules)\u662f\u5f88\u591a\u4e2a\u539f\u5b50(Atoms)\u7684\u7ec4\u5408\uff0c\u6bd4\u5982\u8bf4\u4e00\u4e2a\u8868 \u5355\u4e2d\u5305\u62ec\u4e86\u4e00\u4e2a\u6807\u7b7e\uff0c\u8f93\u5165\u6846\u548c\u6309\u94ae\u3002\u751f\u7269(Organisms)\u662f\u4f17\u591a\u5206\u5b50(Molecules) \u7684\u7ec4\u5408\u7269\uff0c\u6bd4\u5982\u4e00\u4e2a\u7f51\u7ad9\u7684\u9876\u90e8\u533a\u57df\uff0c\u4ed6\u5305\u62ec\u4e86\u7f51\u7ad9\u7684\u6807\u9898\u3001\u5bfc\u822a\u7b49\u3002\u800c\u6a21\u677f (Templates)\u53c8\u662f\u4f17\u591a\u751f\u7269(Organisms)\u7684\u7ed3\u5408\u4f53\u3002\u6bd4\u5982\u4e00\u4e2a\u7f51\u7ad9\u2eda\u9762\u7684\u5e03\u5c40\u3002\u800c \u6700\u540e\u7684\u2eda\u9762\u5c31\u662f\u7279\u6b8a\u7684\u6a21\u677f\u3002"),l.a.createElement(i["a"],{code:".m-10 {\n  margin: 10px;\n}\n.w-50 {\n  width: 50%;\n}",lang:"css"}),l.a.createElement("h2",{id:"itcss"},l.a.createElement(r["AnchorLink"],{to:"#itcss","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"ITCSS"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"Settings \u2014 \u5168\u5c40\u53ef\u7528\u914d\u7f6e\uff0c\u8bbe\u7f6e\u5f00\u5173\u3002",l.a.createElement("span",{className:"math math-inline"},l.a.createElement("mjx-container",{className:"MathJax",jax:"SVG"},l.a.createElement("svg",{style:{verticalAlign:"-0.452ex"},xmlns:"http://www.w3.org/2000/svg",width:"25.792ex",height:"2.149ex",role:"img",focusable:"false",viewBox:"0 -750 11400 950",xmlnsXlink:"http://www.w3.org/1999/xlink"},l.a.createElement("defs",null),l.a.createElement("g",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",transform:"scale(1,-1)"},l.a.createElement("g",{"data-mml-node":"math"},l.a.createElement("g",{"data-mml-node":"merror","data-mjx-error":"You can't use 'macro parameter character #' in math mode",title:"You can't use 'macro parameter character #' in math mode"},l.a.createElement("rect",{"data-background":"true",width:11400,height:950,y:"-200"}),l.a.createElement("title",null,"You can't use 'macro parameter character #' in math mode"),l.a.createElement("g",{"data-mml-node":"mtext",style:{fontFamily:"serif"}},l.a.createElement("text",{"data-variant":"-explicitFont",transform:"scale(1,-1)",fontSize:"884px"},"color-ui: #BADA55; ")))))))),"spacing-unit:10px")),l.a.createElement("li",null,l.a.createElement("p",null,"Tools \u2014\u901a\u7528\u5de5\u5177\u51fd\u6570\u3002@mixin font-color() ","{","font-color: $color-ui;","}")),l.a.createElement("li",null,l.a.createElement("p",null,"Generic \u2014 \u901a\u7528\u57fa\u7840\u6837\u5f0f\u3002Normalize, resets, box-sizing: border-box;")),l.a.createElement("li",null,l.a.createElement("p",null,"Base \u2014 \u672a\u5f52\u7c7b\u7684 HTML \u5143\u7d20\u3002ul ","{","list-style: square outside;","}")),l.a.createElement("li",null,l.a.createElement("p",null,"Objects \u2014\u8bbe\u8ba1\u90e8\u5206\u5f00\u59cb\u4f7f\u7528\u4e13\u7528\u7c7b\u3002.ui-list__item ","{","padding: $spacing-unit;","}")),l.a.createElement("li",null,l.a.createElement("p",null,"Components \u2014 \u8bbe\u8ba1\u7b26\u5408\u4f60\u4eec\u7684\u7ec4\u4ef6\u3002"),l.a.createElement("ul",null,l.a.createElement("li",null,"products-list ","{","@include font-brand();border-top: 1px solid $color-ui;","}"))),l.a.createElement("li",null,l.a.createElement("p",null,"Trumps \u2014\u91cd\u5199\uff0c\u53ea\u5f71\u54cd\u4e00\u5757\u7684 DOM\u3002(\u901a\u5e38\u5e26\u4e0a\u6211\u4eec\u7684!important)"))),l.a.createElement("style",{dangerouslySetInnerHTML:{__html:'\nmjx-container[jax="SVG"] {\n  direction: ltr;\n}\n\nmjx-container[jax="SVG"] > svg {\n  overflow: visible;\n  min-height: 1px;\n  min-width: 1px;\n}\n\nmjx-container[jax="SVG"] > svg a {\n  fill: blue;\n  stroke: blue;\n}\n\nmjx-container[jax="SVG"][display="true"] {\n  display: block;\n  text-align: center;\n  margin: 1em 0;\n}\n\nmjx-container[jax="SVG"][display="true"][width="full"] {\n  display: flex;\n}\n\nmjx-container[jax="SVG"][justify="left"] {\n  text-align: left;\n}\n\nmjx-container[jax="SVG"][justify="right"] {\n  text-align: right;\n}\n\ng[data-mml-node="merror"] > g {\n  fill: red;\n  stroke: red;\n}\n\ng[data-mml-node="merror"] > rect[data-background] {\n  fill: yellow;\n  stroke: none;\n}\n\ng[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line] {\n  stroke-width: 70px;\n  fill: none;\n}\n\ng[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame] {\n  stroke-width: 70px;\n  fill: none;\n}\n\ng[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed {\n  stroke-dasharray: 140;\n}\n\ng[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted {\n  stroke-linecap: round;\n  stroke-dasharray: 0,140;\n}\n\ng[data-mml-node="mtable"] > g > svg {\n  overflow: visible;\n}\n\n[jax="SVG"] mjx-tool {\n  display: inline-block;\n  position: relative;\n  width: 0;\n  height: 0;\n}\n\n[jax="SVG"] mjx-tool > mjx-tip {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\nmjx-tool > mjx-tip {\n  display: inline-block;\n  padding: .2em;\n  border: 1px solid #888;\n  font-size: 70%;\n  background-color: #F8F8F8;\n  color: black;\n  box-shadow: 2px 2px 5px #AAAAAA;\n}\n\ng[data-mml-node="maction"][data-toggle] {\n  cursor: pointer;\n}\n\nmjx-status {\n  display: block;\n  position: fixed;\n  left: 1em;\n  bottom: 1em;\n  min-width: 25%;\n  padding: .2em .4em;\n  border: 1px solid #888;\n  font-size: 90%;\n  background-color: #F8F8F8;\n  color: black;\n}\n\nforeignObject[data-mjx-xml] {\n  font-family: initial;\n  line-height: normal;\n  overflow: visible;\n}\n\nmjx-container[jax="SVG"] path[data-c], mjx-container[jax="SVG"] use[data-c] {\n  stroke-width: 3;\n}\n'}})))}));n["default"]=e=>{var n=l.a.useContext(r["context"]),a=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(o,{demos:a})}}}]);