CSS guidelines

e10101 发布于2019-08-30 13:17 / 2504人阅读

原文链接：链接描述

Syntax and Formatting

At a very high-level, we want

two (2) space indents, no tabs;

80 character wide columns;

multi-line CSS;

meaningful use of whitespace.

But, as with anything, the specifics are somewhat irrelevant—consistency is key.

Multiple Files

With the meteoric rise of preprocessors of late, more often is the case that developers are splitting CSS across multiple files.

Even if not using a preprocessor, it is a good idea to split discrete chunks of code into their own files, which are concatenated during a build step.

Table of Contents

An up-to-date table of contents provides a team with a single, canonical catalogue of what is in a CSS project, what it does, and in what order.

A simple table of contents will—in order, naturally—simply provide the name of the section and a brief summary of what it is and does.

Naturally, this section would be substantially larger on the majority of projects, but hopefully we can see how this section—in the master stylesheet—provides developers with a project-wide view of what is being used where, and why.

80 Characters Wide Meaningful Whitespace

One (1) empty line between closely related rulesets.

Two (2) empty lines between loosely related rulesets.

Five (5) empty lines between entirely new sections.

HTML

When writing multiple values in a class attribute, separate them with two spaces

When multiple classes are related to each other, consider grouping them in square brackets ([ and ])

As with our rulesets, it is possible to use meaningful whitespace in your HTML. You can denote thematic breaks in content with five (5) empty lines

Separate independent but loosely related snippets of markup with a single empty line

GPU云服务器云服务器 Guideline guidelines css引入css css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115446.html

CSS魔法堂：Box-Shadow 没那么简单啦:)

摘要：阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。实现原理纯个人理解创建一个与元素尺寸一致的阴影盒子将阴影盒子定位到于元素重合，并位于元素之上水平和垂直各画两条线，分别跟元素重合共条分别记为根据和移动。前言说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。二话不说看效果 showI...

Galence 2019-08-30 13:00 评论0 收藏0
前端练级攻略(第一部分)

摘要：第一部分介绍了如何使用和开发接口。由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。当您第一次得知有预处理器和后处理器时，你很有可能在任何地方已经使用它们。我之前建议的文章，，也涵盖了预处理器相关的知识。我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。本指南列出前端学习路线，并提供了平时收藏的一些...

qpal 2019-08-23 16:48 评论0 收藏0
前端资源整理 - 订阅、工具等

摘要：取自我的的，欢迎，欢迎。原不定期更新，此文可能断更。最新更新时间。前端资源中文平时开发和学习过程中自己收集的一些前端资源。自行取用，不断更新。你也可以关注我从而在我的点赞中了解到更多有意思的项目。前端之路，且行且珍惜。取自我的GITHUB 的 fe-store-house repo，欢迎 PR，欢迎 STAR。原 repo 不定期更新，此文可能断更。断更了一年多，重新更新一下，似乎...

caiyongji 2019-08-30 12:56 评论0 收藏0