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

Question

body
font-family:"HelveticaNeue",Helvetica,Arial,sans-serif
font-size:20px
color:#666
background-color:#888
main
margin:80pxauto0auto
padding:0px50px
header
display:flex
flex-direction:row
flex-wrap:wrap
justify-content:space-around
align-content:space-around
align-items:flex-end
padding:50px30px
color:#fff
background-color:#aaa
.intro-text
width:610px
max-width:675px
margin-bottom:30px
.star-bright
margin:40pxauto30px
padding:0
max-width:512px
border:0
border-top:solid5px
text-align:center
img
border-radius:50%
width:250px
height:250px
max-width:80%
margin-top:30px
margin-bottom:10px
section
padding:40px0
background-color:#eee
h2
text-align:center
.star-dark
margin:40pxauto30px
padding:0
max-width:512px
border:0
border-top:solid5px
text-align:center
border-color:#888
.grid
display:flex
flex-direction:row
flex-wrap:wrap
justify-content:space-around
align-content:space-around
align-items:flex-end
max-width:90%
list-style:none
margin:20pxauto
li
margin:20px
max-width:600px
@media(min-width:1023px)
li
max-width:420px
img
max-width:100%
height:auto
display:block
hr
border-color:#888
#contact
h2
text-align:center
.star-dark
margin:40pxauto30px
padding:0
max-width:512px
border:0
border-top:solid5px
text-align:center
border-color:#888
>div
display:flex
flex-direction:row
flex-wrap:wrap
justify-content:space-around
align-content:space-around
align-items:flex-start
form
width:80%
.form-item
position:relative
margin-bottom:10px
padding-bottom:10px
border-bottom:1pxsolid#bbb
label
display:block
z-index:0
position:relative
top:2em
margin:0
font-size:.85em
line-height:1.764705882em
vertical-align:middle
vertical-align:baseline
opacity:0
-webkit-transition:top.3sease,opacity.3sease
transition:top.3sease,opacity.3sease
input
z-index:1
position:relative
padding-right:0
padding-left:0
border:0
border-radius:0
font-size:1.5em
background:00
box-shadow:none!important
resize:none
width:100%
textarea
z-index:1
position:relative
padding-right:0
padding-left:0
border:0
border-radius:0
font-size:1.5em
background:00
box-shadow:none!important
resize:none
width:100%
@media(min-width:1023px)
form
width:40%
margin-left:20px
>div
width:80%
p
margin:60pxauto0
max-width:700px
@media(min-width:1023px)
>div
max-width:38%
p
margin-top:35px
p:last-child
margin-top:270px
footer
background-color:#000
color:#fff
text-align:left
.footer-above
display:flex
flex-direction:row
flex-wrap:wrap
justify-content:space-around
align-content:space-around
align-items:flex-start
divul
list-style:none
.footer-below
text-align:center

Answer 1

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

Answer 2

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