資訊專欄INFORMATION COLUMN
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 OrderLocation 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 conventionLong 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 freelyThe 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
}
}
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/113359.html
摘要：分享實錄云計算技術源于互聯(lián)網(wǎng)公司，現(xiàn)在云計算已經(jīng)是下一代企業(yè)級的發(fā)展趨勢。如何做云計算一直是云計算技術的領導者?；ヂ?lián)網(wǎng)公司的快速發(fā)展，已經(jīng)印證了云計算技術和云原生應用相比傳統(tǒng)構架的巨大優(yōu)勢。 今天小數(shù)又給大家?guī)硪黄韶洕M滿的分享——來自KVM社區(qū)線上群分享的實錄，分享嘉賓是數(shù)人云CEO王璞，題目是《云計算與 Cloud Native》。這是數(shù)人云在KVM社區(qū)群分享的第一彈，之后還有數(shù)...
摘要：在谷歌不是這樣，谷歌不會把特定的應用裝在某臺服務器上，業(yè)務應用和服務器的強綁定對于谷歌這種量級的數(shù)據(jù)中心的維護難度太高了。但是金融機構的數(shù)據(jù)中心規(guī)模不像谷歌這么大，所以能做到業(yè)務應用和硬件的強綁定。 復雜的基礎IT架構是傳統(tǒng)金融的現(xiàn)狀，如何快速響應用戶需求，加快新業(yè)務上線速度，縮短產(chǎn)品的迭代周期? 數(shù)人云在容器落地金融云的2年實踐中，實現(xiàn)金融核心業(yè)務技術WebLogic、J2EE、Or...
摘要：編者按本文作者為，文章從程序架構與系統(tǒng)的發(fā)展歷程出發(fā)，逐步論證了為什么響應式編程并非一時之勢，而是能帶來更快處理速度，更高硬件利用率的未來選擇。這就是摩爾定律所說的應用程序。響應式方法并非一時之勢它是編寫軟件的未來趨勢。 【編者按】本文作者為 David Buschman，文章從程序架構與系統(tǒng)的發(fā)展歷程出發(fā)，逐步論證了為什么響應式編程并非一時之勢，而是能帶來更快處理速度，更高硬件利用率...
摘要：現(xiàn)在回到我們這一章節(jié)的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節(jié)的末尾拋出了幾個問題假設你要做一個游戲單頁面，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
閱讀 2178·2021-09-07 09:59
閱讀 2670·2019-08-29 16:33
閱讀 3856·2019-08-29 16:18
閱讀 3019·2019-08-29 15:30
閱讀 1835·2019-08-29 13:52
閱讀 2229·2019-08-26 18:36
閱讀 694·2019-08-26 12:19
閱讀 845·2019-08-23 15:23
