前言

大家好,我是作曲家种太阳 最近忙于新业务,没有写文章,学习进度也是缓慢,接下来我会以笔记为主,做一些输出,沉淀一段时间

本篇是学习某课网的css架构蘑菇街的学习笔记,了解css架构设计理念和分层概念,希望对你有帮助

1.css设计方案

从最简单方案开始了解,只了解理念和规范就行 \

(1). oocss 面向对象css:

原则: 1.容器与样式分离 2.结构基础与皮肤分离 3.组件开发 === oocss 4.强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器 5.重复样式或者将重复样式尽量进行拆分 \

(2).Bem css 进阶版的oss:

命名规范:

1. .media 代表了更高级别的抽象或组件。
2. .media__element 代表.media的后代，用于形成一个完整的.media的整体。
3. .media--modifier 代表.media的不同状态或不同版本。

示例:

<div class="media">
    <img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
    <div class="media__body">
        <h3 class="alpha">Welcome to Foo Corp</h3>
        <p class="lede">Foo Corp is the best, seriously!</p>
    </div>
</div>  

示例2:

(3).samaCss:

理念是分门别类的吧css分成若干个代码块: 好处是:易扩展,易分类,易读懂 自定义分类(可扩展或删除):

• Base ----- 默认样式重置
• Layout ----- 布局样式
• Moudles ----- 组件样式
• States ----- 状态效果样式
• Theme ----- 皮肤样式

命名规范: .l-header(布局) , .is-hidden(状态) , . theme-nav(皮肤) 等

(4).Itcss: \

理念:1.比samCss分的更详细 \ 2.下一层css永远继承上一层css 2. 越到下层,css权重越高 分类:

类别	介绍
Settings	项目使用的全局变量
Tools	mixin，function
Generic	最基本的设定 normalize.css，reset
Base	type selector
Objects	不经过装饰 (Cosmetic-free) 的设计模式
Components	UI 组件
Trumps	唯一可以使用 important! 的地方

ps:object和components都可以归为ui组件样式

(5).Atomic CSS原子化css: 理念:通俗讲就是一个类写一个样式，这样的好处是对样式极限复用 代表库: Tailwindcss Tailwindcss官网 示例:

<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
    <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Product</a>
    <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Features</a>
    <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Marketplace</a>
    <a href="#" class="font-medium text-gray-500 hover:text-gray-900">Company</a>
    <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Log in</a>
</div>