<!--容器与内容分离-->
<!-- post中的meta-data -->
<div class="post">
<p class="metadata">
<a>Author name</a>commented on<a>21-02-2010</a>@</p>
</div>
<!-- comment中的meta-data -->
<div class="comment">
<p class="metadata">
<a>Author name</a>commented on<a>21-02-2010</a>@</p>
</div>
.post {}
.metadata {}
<!--基础对象与对象--> 实际上就是另起一个类名
<div class= "menu fix2"></div>
.menu {
color:{green;font-size: 14px;}
}
.fix2{font-size: 16px;}
<!--放入 Vue中的组件-->
<template>
<div class="menu"></div>
</template>
<script>
export default {
name:'MetaData',
props:{}
</script>
<style>
.menu{
color: green;
font-size:14px;
}
</style>
OOCSS
OO:面向对象
原则一:容器与内容分离
原则二:结构(基础对象)与皮肤分离
原则三:面向设计开发(我加的)
<template>
<div>
<meta-data class="fix"></meta-data>
<meta-data class="fix1"></meta-data>
</div>
</template>
<style>
.fix{
color: red;
}
.fix1 {
font-size: 16px;
}
</style>
BEM
块(Block)、元素(Elmenet_) 、修饰符(Modifier --)
作用:命名规范、让页面结构清晰
进阶版的OOCSS
SMACSS
◆分类:Base、Layout、Modules、State、Theme
◆好处:易维护、易复用、易扩展..
命名规范:.l-header、.is-hidden、.theme-nav
Base:浏览器默认样式重置 normalize.CSS 并同时进一些元素进行特殊定制化
layout:管着整个网站布局方式 .l 在vue下面是不需要存在的
modules:管着整个网站可复用可通用的模块的样式 在vue的下面是不存在的
state:管理模块不同的状态样式 .is
Theme：管理整个网站的皮肤 .theme
ITCSS
分层:七层
与SMACSS区别:层次分得更细
Settings 维护整个网站的变量
Tools 维护一些样式的工具库
Generic 浏览器默认样式的重置
Base 对元素进行一些定制化处理
Objects 通用模块的样式处理
Components通用模块的样式处理
Trumps 让样式的权重变高
在vue实际分为 base Settings Tools trumps
ACSS
一个样式属性一个类
好处:极强的复用性、维护成本低
坏处:破坏了CSS命名的语义化
经典框架:tailwindcss
平常开发项目的样式层主要采用 zx
Settings，Tools ，Generic Base Components ACSS theme
Generic 直接在vue 安装normalzlies 这包就可以了 不需要新建文件夹
Components 组件不需要新建文件夹
