{"id":14990558,"url":"https://github.com/michealwayne/moo-css","last_synced_at":"2025-04-12T02:24:58.403Z","repository":{"id":57302671,"uuid":"178113077","full_name":"MichealWayne/Moo-CSS","owner":"MichealWayne","description":"模块化面向对象的css写法规范策略。适用于大中小型C端项目样式开发，旨在提高开发和维护效率。","archived":false,"fork":false,"pushed_at":"2023-10-07T23:19:03.000Z","size":3321,"stargazers_count":75,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T02:24:51.912Z","etag":null,"topics":["css","css-in-js","css-modules","frontend","less","moo-css","sass","stylus"],"latest_commit_sha":null,"homepage":"http://blog.michealwayne.cn/Moo-CSS/docs/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MichealWayne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-28T02:45:04.000Z","updated_at":"2024-04-19T02:09:41.000Z","dependencies_parsed_at":"2024-09-15T18:22:36.945Z","dependency_job_id":null,"html_url":"https://github.com/MichealWayne/Moo-CSS","commit_stats":{"total_commits":37,"total_committers":5,"mean_commits":7.4,"dds":0.5945945945945945,"last_synced_commit":"93a094c6924f051bc4f9b476e80ff42c87b56280"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FMoo-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FMoo-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FMoo-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FMoo-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichealWayne","download_url":"https://codeload.github.com/MichealWayne/Moo-CSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506316,"owners_count":21115416,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","css-modules","frontend","less","moo-css","sass","stylus"],"created_at":"2024-09-24T14:20:22.484Z","updated_at":"2025-04-12T02:24:58.381Z","avatar_url":"https://github.com/MichealWayne.png","language":"CSS","readme":"# Moo-CSS\r\n\r\n以样式自动化为目标，模块化面向对象的css写法规则策略Moo-CSS, 以及通用Base层样式库[moo-css-base](./moo-css-base/)。[Moo-CSS文档地址\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/), [English introduce\u003e\u003e](./README_en.md)，[Moo-CSS生态（建设中）\u003e\u003e](https://github.com/MichealWayne/moo-css-plugins)\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://blog.michealwayne.cn/Moo-CSS/docs/\" target=\"_blank\"\u003e\r\n    \u003cimg alt=\"Moo-CSS\" height=\"150\" src=\"./docs/logo.png\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n- 核心：组件模块化+面向对象。\r\n- 优点：\r\n\t- 重用性强\r\n\t- 维护性强\r\n\t- 拓展性强\r\n- 缺点：\r\n\t- 上手（理解）成本稍高~\r\n\t\r\n主要目录结构：\r\n```\r\nMoo-CSS\r\n├─moo-css-base\r\n│   ├─less\t// less base\r\n│   ├─sass\t// sass base\r\n│   └─stylus\t// stylus base\r\n├─docs\t\t// documents\r\n└─demo      // demos\r\n```\r\n\r\n## milestones\r\n- 2021.12: moo-css-base、moo-css-transformer优化；\r\n- 2021.06：webpack/snowpack插件；可视化sketch2code lowcode；\r\n- 2020.12: sketch2code转换服务；\r\n- 2020.06: 生态插件(Chrome插件，VSCode插件)；\r\n- 2019.12: Moo-CSS写法策略及moo-css-base。\r\n\r\n## guide\r\n![Moo-CSS structure](http://blog.michealwayne.cn/images/notes/oocss/p-part.jpg)\r\n\r\n### moo-css-base\r\n- [npm moo-css-base](https://www.npmjs.com/package/moo-css-base)\r\n- [moo-css-base vscode插件](./moo-css-plugin.test.vsix)\r\n- [moo-css-base 检索数据](https://github.com/MichealWayne/fe-tools/blob/master/datas/moo-css.json)\r\n- [moo-css fe-tools](https://github.com/MichealWayne/fe-tools)\r\n- moo-css-base demo url: [移动端](http://blog.michealwayne.cn/Moo-CSS/demo/mobile/dist/mobileIndex.html), [PC端](http://blog.michealwayne.cn/Moo-CSS/demo/pc/dist/index.html)。\r\n 其中移动端demo建议调成手机模式在开发者模式中查看。\r\n \r\n### moo-css-transformer\r\ncss代码/moo-css选择器的相互转换\r\n- [仓库地址](https://github.com/MichealWayne/moo-css-plugins/tree/master/moo-css-transformer)\r\n\r\n### moo-css-web\r\n虚拟dom -\u003e 符合moo-css规范的web代码\r\n- [仓库地址](https://github.com/MichealWayne/moo-css-plugins/tree/master/moo-css-web)\r\n\r\n### moo-css-weapp(todo)\r\n虚拟dom -\u003e 符合moo-css规范的小程序代码\r\n\r\n### moo-css-sketch(todo)\r\nsketch -\u003e web/weapp\r\n\r\n----------\r\n\r\n\r\n## 基本规范\r\n### 1.1 ID、class、attribute选择器的使用范围\r\n- ID：不做样式使用，仅作js DOM操作或作为容器\r\n- class：主要样式\r\n- attr：作为皮肤控制\r\n\r\n## 1 M（模块化）\r\nMoo-CSS中的M(Module)，模块化。Moo-CSS的模块化主要体现在**样式属性**的模块化以及**样式层级**的模块化。\r\n\r\n### 1.1 样式属性分类\r\n根据样式属性的特征，Moo-CSS将样式属性分类样式划分为以下模块，并根据模块特征给定命名前缀（[命名规则-标志前缀](http://blog.michealwayne.cn/Moo-CSS/docs/nameRule/#基本规则)）：\r\n- **grid**：**布局样式**。布局、位置相关样式。如margin, position, line-height等；\r\n- **function**：**功能样式**。文字居中、溢出隐藏等功能性样式。如clear, text-align, overflow, font-style, font-weight, font-family, vertical-align, white-space, text-decoration, text-indent等；\r\n- **unit**：**单元样式**。宽高、padding等影响块或元素的常用单元样式。如width, height, padding, display, border, flex等；\r\n- **status**：**状态样式**。透明度、是否隐藏、层级等显示状态样式（是唯一可设置!important的部分）。如visibility, opacity, z-index, transform等；\r\n- **skin**：**皮肤样式**。主题颜色背景色等。如color, background-color, box-shadow等；\r\n- **animation**：**动画样式**。过渡和动画。如animtaion, transition。\r\n\r\n\r\n另外两种特殊模块：\r\n- **JavaScript DOM**：**DOM操作样式**。供js操作DOM节点，**建议不带有样式属性**；\r\n- **React/Vue/Angular sepcial**：**框架独有样式**。供专有框架使用，如过渡动画。\r\n\r\n\r\n\r\n更多样式属性归类可参考[样式模块词典\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/nameDictionary/#样式模块词典)\r\n\r\n\u003e 注意，Moo-CSS推荐其中\r\ngrid, module, unit, component, status, animation通常由className实现；\r\nskin通常由属性(attribute)实现，*小程序通过className实现；\r\nfunction大部分由className实现，部分低权重样式由属性实现。\r\n\r\n\u003e 使用className以及attribute来确认样式可以较好避免权重问题，且从中我们可以得知skin作为辅助样式而样式权重相比较低。Moo-CSS推荐避免ID以及!important进行样式开发，有且仅有一个!important样式用于元素隐藏(`.z-hide { display: none !important }`)。\r\n\r\n\r\n### 1.2 样式分层\r\n### 样式分层\r\n根据样式属性的特征，将项目样式分层为以下模块层级：\r\n- **Base**：基础层。样式最底层，包含样式重置reset、提供样式变量及方法、供给极常出现的样式库。（通常所有页面共用且不做修改操作）。\r\n- **Component**：组件层。包含样式组件和方法组件，简单组件样式。如按钮、蒙层；方法组件包括动画方法和mixins方法。可依赖于Base层和Skin层。\r\n- **Skin**：皮肤层。设置颜色、背景色、屏幕媒体查询设置等皮肤，且提供项目独有颜色变量。常供应于Component层和Module层；\r\n- **Module**：模块层。根据业务划分的模块，常作为Component的容器。依赖于上面几个模块以及Layout层；\r\n- **Layout**: 结构层。提供Module层和其中的Component布局样式，构成最终页面。\r\n\r\n其中，Base、Component、Skin、Layout中样式作用域为全局，Module层样式保持私有性。各层级保持独立性，满足SRP(单一功能原则)。\r\n\r\n详细介绍可见[文档-样式分层](http://blog.michealwayne.cn/Moo-CSS/docs/moocss/#样式分层)\r\n\r\n### 1.3 Base层样式权重计算\r\n权重计算参考公式：\r\n```\r\n1 / （样式资源量 / 样式属性耦合度 * 0.4 + 0.3 / 样式使用率 ^ 2 + 选择器权重 * 0.3）\r\n```\r\n\r\n数值越大权重越高，高权重可归入Base层。\r\n\r\n其中，样式资源量可由样式代码量和引入资源大小进行衡量；样式属性耦合度是指在多样式属性的样式中，属性直接的耦合度，如溢出显示'...'这样的耦合度就非常高；样式使用率主要考虑多页面（包括路由页面）的样式使用率；选择器权重计算值越小越好。**权重公式仅做参考，简单来说就是提取高频使用且不占用大量资源的原子样式/方法。**\r\n\r\n\r\n## 2 OO（面向对象）\r\nMoo-CSS中的OO(Object-Oriented)，面向对象。Moo-CSS的面向对象主要体现在Component和Module层。\r\n\r\n同OOCSS，Moo-CSS中的CSS对象由以下4部分内容组成：\r\n- HTML，可以是DOM的一个或多个节点；\r\n- CSS声明，关于这些DOM节点样式的CSS声明，其中部分CSS声明满足私立性；\r\n- 资源组件，如背景图片，sprites等用于展示资源的；\r\n- 事件，与对象关联的javascript行为、侦听器或方法。\r\n\r\n### 2.1 两个原则\r\n#### 2.1.1 分离结构和皮肤\r\n分离结构和皮肤意味着要将重复的样式特征（如背景和边框等样式）定义为单独的“皮肤”，通过和其他各种CSS“对象”的混合及匹配，使得在没有太多代码的情况下实现大量的视觉变化。\r\n\r\n比如说一个渐变按钮，那么 .btn 的 class 是不会包含渐变相关的属性的，而是需要单独抽取出一个渐变的 class，然后让 .btn 去扩展从而得到一个渐变的按钮。\r\n\r\n#### 2.1.2 区分容器和内容\r\n区分容器和内容意味着将很少使用位置相关的样式，一个CSS“对象”应该不管放到哪里看起来都一样。所以不要用`.myObject h2{ ... }`来设置特定的`\u003ch2\u003e`样式，而是应该创建并应用一个描述与`\u003ch2\u003e`相关的class，如`\u003ch2 class=\"category\"\u003e`。\r\n\r\n总得来说，就是满足SRP（单一职责）、OCP（开放封闭）\r\n\r\n### 2.2 OO特征\r\n\r\n#### 2.2.1 封装\r\nMoo-CSS的封装特性一方面体现在Module/Component中对象内容的封装，保持对象之间的独立性；\r\n另一方面，各样式属性/方法的封装以及各样式层级的封装均体现了其封闭性。\r\n\r\n#### 2.2.2 继承\r\n页面Module层/Component层可由其他Component层进行样式继承和拓展，各模块符合开闭原则(The Open/Closed Principle)\r\n\r\n#### 2.2.3 多态\r\nMoo-CSS所说的多态一方面是指对应平台的多态样式/方法。比如[moo-css-base](https://www.npmjs.com/package/moo-css-base)移动端和PC端的Component层分别提供了rem换算方法`torem`，调用方式相同而移动端进行了1:75的单位换算，而PC端进行了1:54的单位换算。\r\n\r\n\r\n\r\n## 3 命名\r\n选择器命名由小写字母，`_`、`-`符号组成，并通过标志前缀来确定样式命名空间。\r\n\r\nclassName或attribute的写法为：\r\n```\r\nprefix-className/attribute_字母值\r\n``` \r\n或\r\n``` \r\nprefix-className/attribute数字值\r\n```\r\n\r\n### 基本规则\r\n- 类名或属性名由小写字母、数字、`_`、`-`符号组成，不包含大写字母；\r\n- 连字符分隔单词(`-`)，以代替驼峰式命名。如：head-menu；\r\n- 单下划线分隔属性和英文值(`_`)。如：color_red；\r\n- 双下划线分隔模块和元素(`__`)。如：nav__item。\r\n\r\n\r\n\r\n其中标志前缀prefix由样式模块确认：\r\n- `g-`：grid\r\n- `f-`: function\r\n- `u-`: unit、Component unit\r\n- `z-`: status\r\n- `s-`: skin\r\n- `a-`: animation\r\n- `m-`: Module\r\n\r\n\r\n特殊样式模块前缀：\r\n- `j-`: JavaScript DOM\r\n- `v*-`: VueJS专用，如VueJS专用动画`.va-fadein`\r\n- `r*-`: ReactJS专用，如ReactJS专用宽度`.ru-w100`\r\n- `a*-`: Angular专用，如Angular专用皮肤`.as-cr_red`\r\n\r\n\r\n属性简写规则，通常由属性单词首字母组成，部分较长的样式属性单词或避免重复可取首字母和中间字母。如`margin-top` -\u003e `mt`，`background-color` -\u003e `bgc`；属性值单位值为px时，省略px；为rem/vw时，数值转为px并省略rem/vw；为`%`时，则`%`换为`per`，\r\n如`padding-left: 30px` -\u003e `pl30`，`width: 1rem` -\u003e `w75`，`margin-top: 2vw` -\u003e `mt15`，`left: 50%` -\u003e `l50per`。更多属性简写可参考[样式属性命名\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/nameDictionary/#样式属性命名)\r\n\r\n属性值为非模块时，名字为标识，如`icon`、`ovhidden`。\r\n\r\n结合标志，如下\r\n```\r\n.u-w30per\r\n.g-mt30\r\n.f-blod\r\n.s-bgc_red\r\n[s-cr_red]\r\n```\r\n\r\n类名为module时，按照如下命名规则\r\n\r\n\r\n### 3.1 Module命名规则\r\nModule结合Base层、Component层、Skin层、Layout层完成整个样式。其命名通常与项目业务耦合，部分命名可参考[Module命名词典\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/nameDictionary/#module命名词典)\r\n\r\n#### 方式1：BEM的BE\r\n```\r\n(标志前缀)-类块__类元素\r\n```\r\n其中标识前缀可省略\r\n\r\nModule分为块（Block）及元素（Element），\r\n\r\nBlock，即OO中的容器，是用来标识一个具体块的关键字其实就是这个块的名字，如：头-\u003ehead, 内容-\u003econtent, 导航-\u003enav, 尾-\u003efoot。一个块必须有一个唯一的名字（类），这样才能保证块的独立性。\r\n块由gird来控制其布局。\r\n\r\nElement，**依赖于块的元素**。是用来标识一个元素的关键字也是这个元素的名字。如导航栏链接或菜单的每一项-\u003eitem\r\n我们在长名称中使用连字符分隔单词（例如，block-name），使用两个下划线来分隔块名和元素名（block-name__element-name）。\r\n块名称为其元素和专属修饰符定义命名空间。\r\n\r\n\r\n\r\n如\r\n``` html\r\n\u003cnav class=\"m-nav\"\u003e\r\n  \u003ca class=\"m-nav__item\"\u003enav 1\u003c/a\u003e\r\n  \u003ca class=\"m-nav__item\"\u003enav 2\u003c/a\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n#### 结合其它层完成整个样式\r\n\r\n如\r\n``` html\r\n\u003csection class=\"g-pr\"\u003e\r\n  \u003cnav class=\"m-nav f-tc g-pa g-t50l100\" u-size=\"big\" s-bgc_yellow\u003e\r\n    \u003ca class=\"m-nav__item\"\u003enav 1\u003c/a\u003e\r\n    \u003ca class=\"m-nav__item nav_type_selected\"\u003enav 2\u003c/a\u003e\r\n  \u003c/nav\u003e\r\n\u003c/section\u003e\r\n```\r\n\r\n``` css\r\n/* layout */\r\n.g-pr { position: relative; }\r\n.g-pa { position: absolute; }\r\n\r\n/* function */\r\n.f-tc { text-align: center; }\r\n\r\n/* unit */\r\n[u-size=\"big\"] { width: 500px; font-size: 30px; }\r\n[u-size=\"small\"] { width: 50px; font-size: 10px; }\r\n\r\n/* skin */\r\n[s-bgc_yellow] { background-color: yellow; }\r\n\r\n/* module */\r\n.m-nav { /*...*/ }\r\n.m-nav__item { /*...*/ }\r\n```\r\n\r\n#### 方式2：css modules/CSS in JS\r\n\r\n\u003e 如果使用了CSS in JS或者css modules来指定Module的话，则可避免模块元素及修饰符的依赖式写法。（避免BE写法）\r\n\r\nVueJS(vue-cli)可直接在style标签中设置module属性完成css module的设置（可见[文档](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95)）\r\nReactJS需要设置webpack配置文件中cssOptions参数的modules为true。\r\n\r\n如：\r\n``` vue\r\n\u003ctemplate\u003e\r\n  \u003csection :class=\"$style.foot\"\u003e\r\n    \u003cp\u003e\r\n      \u003cimg :class=\"$style.img\" src=\"@/images/i-logo_b.png\"\u003e\r\n    \u003c/p\u003e\r\n    \u003cp\u003e@All right reserved | Design by \u003ca href=\"https://github.com/MichealWayne/\"\u003eMicheal Wayne\u003c/a\u003e\u003c/p\u003e\r\n  \u003c/section\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cstyle lang=\"less\" module\u003e\r\n.foot {\r\n  line-height: 10vw;\r\n  word-break: keep-all;\r\n  white-space: nowrap;\r\n  .img {\r\n    width: 10px;\r\n    height: 10px;\r\n  }\r\n}\r\n\u003c/style\u003e\r\n\r\n```\r\n\r\n#### 结合其它层完成整个样式\r\n``` vue\r\n\u003ctemplate\u003e\r\n  \u003csection :class=\"[$style.foot, 'f-tc']\"\u003e\r\n    \u003cp class=\"u-pt80\"\u003e\r\n      \u003cimg :class=\"[$style.img, 'g-mb20']\" src=\"@/images/i-logo_b.png\"\u003e\r\n    \u003c/p\u003e\r\n    \u003cp class=\"g-fs22 u-pb100\" s-cr_sub\u003e@All right reserved | Design by \u003ca class=\"f-unl\" s-cr_blue href=\"https://github.com/MichealWayne/\"\u003eMicheal Wayne\u003c/a\u003e\u003c/p\u003e\r\n  \u003c/section\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cstyle lang=\"less\" module\u003e\r\n.foot {\r\n  line-height: 10vw;\r\n  word-break: keep-all;\r\n  white-space: nowrap;\t\t\r\n  .img {\r\n    width: 10px;\r\n    height: 10px;\r\n  }\r\n}\r\n\u003c/style\u003e\r\n\r\n```\r\n\r\n#### react 例子\r\n``` jsx\r\nimport React, {Component} from 'react';\r\nimport classnames from 'classnames';\r\n\r\nimport style from './index.scss';\r\n\r\nexport default function Footer () {\r\n  return (\r\n  \u003cfooter\u003e\r\n    \u003cp class=\"u-pt80\"\u003e\r\n      \u003cimg className={classnames(style.img, 'g-mb20')} src={require('@/images/i-logo_b.png')}\u003e\r\n    \u003c/p\u003e\r\n    MIT Licensed | Copyright © 2019-present MichealWayne\r\n  \u003c/footer\u003e\r\n  )\r\n}\r\n```\r\n\r\n``` scss\r\n// index.scss\r\n.foot {\r\n  padding: 40px;\r\n  .img {\r\n    width: 10px;\r\n    height: 10px;\r\n  }\r\n}\r\n```\r\n\r\n\r\n## 4 命名词典以及moo-css-base查询词典\r\n- [帮助：词典\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/nameDictionary/#module命名词典)\r\n- [npm moo-css-base](https://www.npmjs.com/package/moo-css-base)\r\n\r\n[更多详细内容请见文档\u003e\u003e](http://blog.michealwayne.cn/Moo-CSS/docs/)\r\n\r\n\r\n----------------\r\n\r\n## 5 moo-css-base\r\nmoo-css-base为本人从团队多年项目中抽离的公用CSS样式/方法库，遵守Moo-CSS规范，作为页面样式的Base层在全局使用。\r\n\r\n- 功能：浏览器默认样式reset、提供常用原子样式、组件样式基础、颜色变量及常用mixins方法库。\r\n- 兼容：移动端安卓4.4及以上/ios8.1及以上；PC除flex外兼容IE6。\r\n- 体积：其css压缩版本大小（gizp）为移动端3.5k、PC端4.2k。\r\n- 预处理支持情况：less/sass/stylus。\r\n- moo-css-base可直接在项目中按需引用，或者可以作为Base层的划分参考。\r\n\r\n具体使用和介绍请前往[Moo-CSS moo-css-base](http://blog.michealwayne.cn/Moo-CSS/docs/baseLayer/#moo-css-base)\r\n\r\n\r\n----------------\r\n\r\n## 反馈\r\n- [mail: michealwayne@163.com](mailto:michealwayne@163.com)\r\n- [github: Moo-css/issues](https://github.com/MichealWayne/Moo-css/issues)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichealwayne%2Fmoo-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichealwayne%2Fmoo-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichealwayne%2Fmoo-css/lists"}