应该怎么写sass，我写的sass该怎么修改简洁？

Question

bodyfont-family:"HelveticaNeue",Helvetica,Arial,sans-seriffont-size:20pxcolor:#666background-color:#888mainmargin:80pxauto0autopadding:0px50pxheaderdisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-endpadding:50px30pxcolor:#fffbackground-color:#aaa.intro-textwidth:610pxmax-width:675pxmargin-bottom:30px.star-brightmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerimgborder-radius:50%width:250pxheight:250pxmax-width:80%margin-top:30pxmargin-bottom:10pxsectionpadding:40px0background-color:#eeeh2text-align:center.star-darkmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerborder-color:#888.griddisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-endmax-width:90%list-style:nonemargin:20pxautolimargin:20pxmax-width:600px@media(min-width:1023px)limax-width:420pximgmax-width:100%height:autodisplay:blockhrborder-color:#888#contacth2text-align:center.star-darkmargin:40pxauto30pxpadding:0max-width:512pxborder:0border-top:solid5pxtext-align:centerborder-color:#888>divdisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-startformwidth:80%.form-itemposition:relativemargin-bottom:10pxpadding-bottom:10pxborder-bottom:1pxsolid#bbblabeldisplay:blockz-index:0position:relativetop:2emmargin:0font-size:.85emline-height:1.764705882emvertical-align:middlevertical-align:baselineopacity:0-webkit-transition:top.3sease,opacity.3seasetransition:top.3sease,opacity.3seaseinputz-index:1position:relativepadding-right:0padding-left:0border:0border-radius:0font-size:1.5embackground:00box-shadow:none!importantresize:nonewidth:100%textareaz-index:1position:relativepadding-right:0padding-left:0border:0border-radius:0font-size:1.5embackground:00box-shadow:none!importantresize:nonewidth:100%@media(min-width:1023px)formwidth:40%margin-left:20px>divwidth:80%pmargin:60pxauto0max-width:700px@media(min-width:1023px)>divmax-width:38%pmargin-top:35pxp:last-childmargin-top:270pxfooterbackground-color:#000color:#ffftext-align:left.footer-abovedisplay:flexflex-direction:rowflex-wrap:wrapjustify-content:space-aroundalign-content:space-aroundalign-items:flex-startdivullist-style:none.footer-belowtext-align:center

Answer 1

有几个建议，第一，不应该使用标签选择器，id选择器，第二，层级最好不要超过三层，第三，配合cssmodule来模块化你的css代码，第四，属性名排序问题，最简单的按字母顺序排序，或者也可以按属性类别来排序，最好不要无序，这样会导致的问题有当属性多了，会可能出现重复属性。
                            

Answer 2

我也有几个建议，第一，利用好sass里的变量，将一些通用属性进行提取，方便维护；第二，利用好模块化，将sass文件进行分类。首先是提取公共样式，比如section、button之类的，然后如果页面不多但是每个页面差异性较大可以按照页面进行css文件的分别管理，如果页面多但是有很多样式共用的模块，可根据功能进行模块化，另外，一些nav、footer等也可单独sass文件管理。如果页面有许多css动画，也可将动画文件单独管理。当你出现有两处css一模一样时就该考虑提取了。第三，媒体查询，我个人想法是就近原则，即就近每个模块section，这样方便对比管理。