- /* 工具类命名 */
- .relative {
- position: relative;
- }
- .mt10 {
- margin-top: 10px;
- }
- .pb10 {
- padding-bottom: 10px;
- }
- .black {
- color: navy;
- }
- <p style="font-family: helvetica; color: rgb(20, 20, 20)">
- Inline styles suck.
- </p>
- <p class="helvetica rgb202020">
- Badly written CSS isn't very different.
- </p>
- <p class="sans-serif color-dark">
- Utility classes allow for abstraction.
- </p>
- .circle {
- border - radius: 50 % ;
- }
- .hover - radius0: hover {
- border - radius: 0;
- }
- @media (min-width: 600px) {
- .md-flex {
- display: flex;
- }
- }
- .with - icon: :after {
- content: 'some icon goes here!';
- }
- <div style="box-shadow: 2px 2px 2px rgba(10, 10, 250, .4)">stuff</div>
- <div class="box-shadow">stuff</div>
来源: https://juejin.im/post/5a4387af6fb9a045186b04d1