CSS guidelines

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

原文链接：链接描述

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

私有云服务器托管 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
[译] ConstraintLayout基础系列之参照线guidelines

摘要：参照线的类型当前的参照线有三种类型，默认的第一种参考线是会有一个固定的偏移向父组件的边缘偏移量的单位是。本文开头创建的参照线对于父组件的边缘参考线为。再次提醒的是，应该用边缘而不是边缘。原文：ConstraintLayout basics guidelines作者：Mark Allison 什么是参照线 guidelines 如果你熟悉 UI 设计软件你应该已经使用过参照线 gui...

roundstones 2019-06-25 11:17 评论0 收藏0
Android开发 - 掌握ConstraintLayout（七）辅助线(Guideline)

摘要：设置好辅助线后，我们就可以将约束到这条辅助线上了。当调整这条的边距时，约束对应的所有也会做相应地改变，非常方便。下一篇开发掌握八障碍线，我们将介绍的使用。了解过UI设计的同学都知道，在设计的时候，我们经常在界面上拖进一些辅助线来帮我们对齐UI元素，或者方便我们统一的页边距。在ConstraintLayout的编辑器中，同样也支持这样的功能，我们可以创建一些横向的或者纵向的Guide...

techstay 2019-06-25 12:27 评论0 收藏0
Android Material Design控件使用（一）——ConstraintLayout 约

摘要：参考文章约束布局看这一篇就够了属性篇介绍是谷歌推出替代的组件。支持相对布局线性布局帧布局，看来更像是三者的结合体，并且比这三者更强大的是实现了百分比布局。参考文章：约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇介绍 Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线...

snifes 2019-04-23 15:14 评论0 收藏0