CSS实践教程 |css不继承父类样式

以下是一些CSS实践教程，帮助你写出更优秀的CSS代码：

/* 使用BEM命名规范 */
.header {}
.header__logo {}
.header__nav {}
/* 使CSS易于维护 */
/* Bad */
.header .nav ul {}
/* Good */
.header-nav-list {}
.header-nav-item {}
/* 尽可能的使用预处理器 */
/* Bad */
.header {
background-color: #00FF00;
font-size: 16px;
}
/* Good */
$header-bg: #00FF00;
$header-font-size: 16px;
.header {
background-color: $header-bg;
font-size: $header-font-size;
}
/* 充分利用CSS3 */
/* Bad */
.box {
border: 1px solid #000;
-webkit-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
}
/* Good */
.box {
border: 1px solid #000;
box-shadow: 1px 1px 1px #000;
}
/* 适当使用Flexbox */
/* Bad */
.container {
display: inline-block;
position: relative;
width: 100%;
}
.container .item {
width: 33%;
display: inline-block;
}
/* Good */
.container {
display: flex;
flex-wrap: wrap;
}
.container .item {
flex-basis: 33%;
}

以上就是一些常见的CSS实践技巧，希望对您有帮助。