css结构设计思想
本文摘自博客园-予沁安的文章:结构化CSS设计思维,作为学习笔记记录一下
1.LESS、SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维。很少有人讨论CSS的架构设计。
2.当我们的网站成长为企业级网站时,如果缺乏良好的架构和设计,我们的CSS会成为臃肿、重复和难以维护的一个混沌。借鉴后台软件开发思维。
3.应该根据它们的业务意义,划分未不同的类别。
- 基本(元素)
- 布局
- 模块
- 状态
- 主题
4.保持分离。往结构化走。
5.基本规则的范畴:
基本规则是应用于基本元素级别的规则,作用于全局统一(默认)的风格。最好的一个案例:CSS的重置框架reset.css以及bootstrap的改进方案normalize.css,就完全是基本风格规则,不包含任何其他类型的规则。
6.布局规则的范畴:
(1)页面Page => 布局 Layout => 模块 Module => 元素 Element
(2)一个页面由布局组成,每个布局局部由一个或多个模块组成,一个模块有n个元素组成,看上去简单而完美,真正的结构化、模块化。然而,现实世界总是非线性的。在实际项目中,严格的层次关系设计,遇到了各类特例需要打破这个结构。
(3)当需要模块与模块之间的通信和信息交流时,这种结构却不能自然的支持。
(4)之所以有这些“特例”,根本原因就是分形思维只适合在模块这一级别,而不能往上扩展到布局和页面界别,也不能往下扩展到元素级别。
(5)布局就是布局,应该作为一个独立的方面存在。
(6)布局规则中,我们只关注组件之间的相互关系,不关心组件自身的设计,也不关心布局所在的位置。
比如用list做布局时:
.layout-grid{
margin:;
padding:;
list-style-type: none;
} .layout-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
7.模块规则
模块可以放在布局的组件中,也可以放在另外一个模块内部,是嵌套的,就是分形。
用class和语义标签
我们一般都用class来定义模块
.module > h2{
padding: ......
}
用subclass定义嵌套元素风格
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
8.状态规则
- 状态改变布局风格或模块风格
- 状态大部分时候和JavaScript相联系
最经典的案例就是表单数据的有效性,一般都会引入class定义,类似 is-valid;还有就是tab当前激活的状态 is-tab-active等,前者会改变表单的布局:增加warning信息;后者,会改变tab模块的显示背景来表明当前tab是被选中的。
9.主题规则
主题是整个网站的风格全面的改变。custom
10.基本规则和模块规则的正交案例
场景:
比如说我们网页中需要一个表格来显示一些信息
table{
width: 100%;
border-collapse: collapse;
border: 1px solid #000;
border-width: 1px 1px;
} td{
border: 1px solid #000;
border-width: 1px 1px;
}
css结构设计思想的更多相关文章
- dom4j解析器 基于dom4j的xpath技术 简单工厂设计模式 分层结构设计思想 SAX解析器 DOM编程
*1 dom4j解析器 1)CRUD的含义:CreateReadUpdateDelete增删查改 2)XML解析器有二类,分别是DOM和SAX(simple Api for xml). ...
- css模块化思想(一)--------命名是个技术活
引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的不仅是衣服,更是一种心情.在web前端的世界里,css ...
- css模块化思想(一)
什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更 ...
- CSS模块化思想-----命名是个技术活
CSS模块化思想(一)--------命名是个技术活 引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的 ...
- CSS程序思想
CSS的设计思想,比如:CSS预处理器.CSS对像(OOCSS).SMACSS.Atomic设计和OrganicCSS等 一.CSS预处理器最重要的功能: 1.连接: ...
- css分离思想
CSS命名就应该最简单.最直接,直捣黄龙.没有HTML标签,没有层级,这些通通滚蛋,不要.为什么不要,有三大原因: 1. 限制重用 我们会使用层级(#test .test),会使用标签(ul.test ...
- 谈 CSS 模块化
以前看过模块化的相关资料以及解释,对模块化有了一个表皮的了解,自己也做了一些相关的实践,由于接触到的项目交小,所以也没能更好的去体现和理解模块化,但总体还是有那么一些感悟,但是如果要说怎么才能算是好的 ...
- [译]CSS content
原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号) ...
- 《CSS网站布局实录》学习笔记(六)
第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核 ...
随机推荐
- 用Understand阅读 VS2010项目源码
一.查看vs2010项目 打开understand,File-New-Project...-Next-Next [向导第三步,选"Import Visual Sudio project fi ...
- Top 16 Java 应用类 - 这些功能再也不用自己写了
Java中有很多应用类.这些类定义静态方法能够解决非常多常见的问题.以下是通过5万个开源项目统计得到的最热门的16个应用类. 类按热门程序排列.类的方法也是按热门程序排序. 浏览这个类能够看看有哪些功 ...
- C#实现窗口拖动时各个控件同比自己主动放缩大小
实现方式主要是利用panel控件为主题.对于每一个控件的大小位置和字体这几个属性进行记录. 然后依据窗口改变的大小同一时候放缩. 简要过程例如以下: 1 创建C#窗口程序项目. 2 Panel放置到 ...
- git --- ! [rejected] master -> master (non-fast-forward)
如何解决failed to push some refs to git Administrator@PC-20150110FGWU /K/cocos2d/yc (master) $ git push ...
- 在kafka/config/目录下面有3个配置文件参数说明(producer.properties。consumer.properties。server.properties)
(1).producer.properties:生产端的配置文件 #指定kafka节点列表,用于获取metadata,不必全部指定 #需要kafka的服务器地址,来获取每一个topic的分片数等元数据 ...
- mvc4 视图中的form如何获取
public ActionResult Index(FormCollection form) { var Name = form["字段名" ...
- BootStrap_Table 学习
https://blog.csdn.net/heting90/article/details/52248729 $("#realTime_Table").bootstrapTabl ...
- 【转】BAT取当前日期的前一天
============================取前一天的日期 OK============================@echo off ::前一天的日期,格式化输出echo ...
- spark源码编译,本地调试
1.下载源码 2.进入源码根据README.md编译源码,注意使用的是源码目录下的maven编译 3.用idea导入顶层pom文件 4.修改顶层pom文件和example下的pom文件,将scope的 ...
- C/C++(数据结构链表的实现)
链表 List 链表实现了内存零碎片的有效组织. 静态链表 链表中有两个成员,数据域和指针域 数据域:我们存储的数据. 指针域:指针指向下一个具体的节点,代表了下一个节点的类型是链表类型. 所谓的指针 ...