CSS设计模式之ITCSS的介绍
1、ITCSS和SMACSS其实很像,SMACSS是对CSS做分类处理,而ITCSS是对CSS做分层处理。
2、分层是纵向的,从上往下,层层关联的。
分层:七层
与SMACSS区别:层次分得更细
我们可以看到最上层是 Settings,然后是 Tools,依次往下,最后是trumps。
越往上它的复用性越好。
Settings(设置):预处理程序的变量或方法,如 $color: #eee;$font-primary: 14px
Tools(工具): Mixins和函数
Generic(常规):CSS重置,其中可能包括Eric Meyer的重置, Normalize.css或您自己的一批代码
Base(元素):没有类的单个HTML元素选择器
Objects(对象):通常遵循OOCSS方法的页面结构类
Components(组件):用于设置任何页面元素和所有页面元素样式的美学类(通常与对象类的结构结合使用)
Trumps(importent):最重要的样式,用于覆盖三角形中的任何其他内容
相关文章
-
CSS兄弟选择器的两种类型
1、CSS兄弟选择器,给指定选择器后面紧跟的那个选择器选中的标签设置属性。格式:选择器1+选择器2{ 属性:值; }相邻兄弟选择器必须通过+连接。相邻兄弟选择器只能选中紧跟其后的那个标签,
>2023-10-16 -
css中使用a标签的伪类选择器注意点
a标签的伪类选择器使用注意点1、a标签的伪类选择器可以单独出现也可以一起出现。2、a标签的伪类选择器如果一起出现, 那么有严格的顺序要求。默认状态:link->被访问状态:visited->鼠标悬停状
>2023-10-16 -
css盒模型布局是什么
css传统布局方式就是通过盒模型,使用display属性(文档流布局)+position属性(定位布局)+float属性(浮动布局)。css盒模型布局可以分为文档流布局、浮动布局和定位布局。文档流布局
>2023-10-16 -
css中flex布局如何使用
css flex布局说明1、flex的使用方法很简单,只需要将其display属性设置为flex就可以,也可以设置行内的flex。记得Webkit内核的浏览器,必须加上-webkit前缀。2、设为Fl
>2023-10-16 -
css中grid网格布局的介绍
1、grid布局又称为网格布局,可以实现二维布局方式。2、这是使用CSS控制的,不是使用HTML控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局。网格线(Grid Lines)网格线组成了
>2023-10-16