CSS基础构架及标准

leon 发布于2019-08-29 15:30 / 2735人阅读

CSS Architecture base.less - Provide style reset and atomic functions

the project module(.epc-page) styles

body styles

font-family

font-size

color

width factor

common width

common.less - Abstract the component styles common to the site.

page layout

responsive width

common component styles

page.less - A particular style of a particular page.

All function pages must have their scope

Defining global styles is prohibited

CSS Written Order

Location attribute (position, top, right, z-index, display, float ...)

Size (width, height, padding, margin ...)

Text series (font, line-height, letter-spacing, color- text-align ...)

Background (background, border ...)

Other (animation, transition ...)

CSS Written Standard abbreviation CSS has some properties that can be abbreviated, such as padding, margin, font, etc. This streamlines the code while improving the user"s reading experience.

Remove the "0" before the decimal point

Abbreviated name-Easy to understand, but not casual.

Hyphenated CSS selector naming convention

Long names or phrases can use the middle dash to name selectors.
It is not recommended to use the "_" underscore to name the CSS selector. Why?

Press the shift key a little while typing.

Browser compatibility issues (named after a selector using _tips, for example, is invalid in IE6)

Well-distributed JavaScript variable naming (JS variable name is "_")

Do not use id freely

The ID is unique and high priority, so we should use it on demand.

Less usage Variables

@nice-blue: #5B83AD;
#header {
    color: @nice-blue;
}

We can define the font, size, color, etc. as constants.

Mixins

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

.post a {
    color: red;
    .bordered;
}

We can transfer variables, Usage is similar to functions

Nested Rules

.header {
    color: black;
}

.header .navigation {
    font-size: 12px;
}

.header-logo {
    width: 300px;
}


.header {
    .navigation {
        font-size: 12px;
    }
    &-logo {
        width: 300px;
    }
}

Directives such as media or keyframe can be nested in the same way as selectors.

Namespaces and Accessors

#bundle {
    .button {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
            background-color: white
        }
    }
    .tab {
    ...
    }
    .citation {
    ...
    }
}

We should use the component"s namespace and scope.

Scope

@var: red;
#page {
   @var: white;
   #header {
      color: @var; // white
   }
}

idc机房托管私有云 css基础基础css ps基础知识及操作堡垒机基础平台及管理调用

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

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

云计算与 Cloud Native | 数人云CEO王璞@KVM分享实录

摘要：分享实录云计算技术源于互联网公司，现在云计算已经是下一代企业级的发展趋势。如何做云计算一直是云计算技术的领导者。互联网公司的快速发展，已经印证了云计算技术和云原生应用相比传统构架的巨大优势。今天小数又给大家带来一篇干货满满的分享——来自KVM社区线上群分享的实录，分享嘉宾是数人云CEO王璞，题目是《云计算与 Cloud Native》。这是数人云在KVM社区群分享的第一弹，之后还有数...

_Zhao 2019-06-28 10:49 评论0 收藏0
稳定高于一切的金融行业如何用容器？

摘要：在谷歌不是这样，谷歌不会把特定的应用装在某台服务器上，业务应用和服务器的强绑定对于谷歌这种量级的数据中心的维护难度太高了。但是金融机构的数据中心规模不像谷歌这么大，所以能做到业务应用和硬件的强绑定。复杂的基础IT架构是传统金融的现状，如何快速响应用户需求，加快新业务上线速度，缩短产品的迭代周期? 数人云在容器落地金融云的2年实践中，实现金融核心业务技术WebLogic、J2EE、Or...

scola666 2019-06-28 15:14 评论0 收藏0
为什么响应式编程并非一时之势？

摘要：编者按本文作者为，文章从程序架构与系统的发展历程出发，逐步论证了为什么响应式编程并非一时之势，而是能带来更快处理速度，更高硬件利用率的未来选择。这就是摩尔定律所说的应用程序。响应式方法并非一时之势它是编写软件的未来趋势。【编者按】本文作者为 David Buschman，文章从程序架构与系统的发展历程出发，逐步论证了为什么响应式编程并非一时之势，而是能带来更快处理速度，更高硬件利用率...

JessYanCoding 2019-08-14 14:05 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

levius 2019-08-02 18:17 评论0 收藏0