css的一些书写习惯的相关最佳实践?

Question

我是一名后端(java)程序员,最近在重温css/html,学习过程中有几个问题请教一下大家
1.一般marginbottom也可以,下面一个元素margintop也可以,到底给谁设置?

2.各种属性书写的顺序, 比如backgroup,margin,哪些书写在前面,如果随意的话显得更乱,

3.每个都写.class 还是.class+元素,更好一些.
如下:是.class p好,还是单独给p设置一个class

<div class="demo">
  <p></p>
</div>

Answer 1

❓问题1. 一般 margin-bottom 也可以,下面一个元素 margin-top 也可以，到底给谁设置?

css 中有个概念叫做 margin 重叠，当 margin 重叠时会取最大的一个 margin 值。但这一些情况下 margin 重叠会被清除。此时就要根据实际需要来设置了。一般是有限设置为 marginp-bottom，即向下顶。若该元素的根据条件渲染的条件没被满足时也不会影响其他元素。

❓问题2.

业界有一些推荐的指南，比如我五年前就在遵循 github 设计总监出品的 HTML/CSS 编码规范: 编写一致、灵活和可持续的 HTML 和 CSS 代码的规范。

除了这个外还有其他前端业界都比较公认的编写指南也可以在这参考: 前端代码风格指南

❓问题3.

一般不建议直接对标签设置样式（在小程序上设置标签的样式控制台会抛警告，看起来也很烦）。若是标准的组件库化开发，大多情况下跟着组件设定好主题值（统一不同尺寸的间隙，颜色等），若有特殊的样式再为该标签编写特定的类名。

同时一般普通类名仅需要设置一层即可，即便后面有需要覆盖代码，可以利用后来居上或通过限定父元素类名增加优先级来覆盖，这样后续覆盖的成本不会特别高。

<section class="section section-demo">
  <!-- other code -->
</section>

.section {
    background: #fff;
    color: #000
    // other...
}

.section-demo {
    // 特定模块存在特定样式，后写的代码若等级一致的话会覆盖前者应用的功能
    // 此处就会覆盖通用样式 section 的颜色值
    color: yellow;
}

Answer 2

问题1 -> 理论上两者都可以, 主要看需求, 看你希望呈现出什么样子, css书写风格取决于html代码风格, 最好要统一, 如下

<style>
  .box-wrapper {
      margin-top: 1rem;
  }
</style>
<div class="box-wrapper"></div>
<div class="box-wrapper"></div>
<div class="box-wrapper"></div>

问题2 -> 这个按照个人习惯就行了, 没有明确的标准写法, 我的个人习惯是相同前缀的属性放在一起, 方便阅读, 如下

<style>
  .box-wrapper{
    width: 300px;
    height: 300px;
    border: 1px solid;
    color: #000000;
    background-color: #AAAAAA;
    border-color: #EEEEEE;
    border-radius: 50%;
    border-style: dotted;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding-left: 5rem;
    padding-right: 9rem;
  }
</style>
<div class="box-wrapper"></div>

如果顺序乱了, 看着就会很难受

<style>
  .box-wrapper{
  margin-bottom: 2rem;
  width: 300px;
  color: #000000;
  border-color: #EEEEEE;
  padding-right: 9rem;
  border-radius: 50%;
  border-style: dotted;
  margin-top: 1rem;
  border: 1px solid;
  background-color: #AAAAAA;
  padding-left: 5rem;
  height: 300px;
  }
</style>
<div class="box-wrapper"></div>

你也可以去参考下 bootstrap.css里的一些写法

问题3 -> 这个主要还是看需求, 你的代码里 举个栗子, 基于css选择器的不同, 给p标签设置样式有很多方式. 如下

<style>
  /* 方式1 */
  p {
      color: red;
  }

  /* 方式2 */
  .demo p {
      color: red;
  }

  /* 方式3 */
  .demo>p {
      color: red;
  }
</style>
<div class="demo">
    <p></p>
</div>

针对于目前的html代码, 这三种样式的效果都是一样的, 但如果html代码是如下这样的

<div class="demo">
  <p>
      <p></p>
  </p>
</div>

那自然就优先考虑方式1和方式2, 因为css还是取决于你的html代码
总而言之, html 和 css 是相互的
html 长什么样, css 就相应长什么样, 反之亦然