css的设计模式

 
<!--容器与内容分离-->

<!-- 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 组件不需要新建文件夹