开发自己的CSS框架（三）

时间：2023-03-31 12:18:41 CSS

本期不涉及框架更新，简单介绍一下各种CSS的写法。各种写法基本上都是互相借鉴。BEM/ul>menu是block块，item是element元素，selected是修改状态。与普通相比，它没有优先级问题。由于我们的纯css是面向前端页面的，优先级问题还是比较少的。一些富交互的UI框架大多使用这种类型。OOCSS可能看起来像这样，更像是辅助类。

或者像这样，这里加一个命名空间s。结合BEM，绘画风格是这样的。.btn.btn--small.btn--red.btn--blue.btn--largeSMACSSBase规则（全局重置样式等）布局规则使用l-或layout-的前缀，例如：.l-header,.l-侧边栏。我看过京东用这个缩写，但是他会加个注释说layout的缩写是l。模块规则使用模块本身的名称，例如图文排列的.media和.media-image。状态规则以is-为前缀，例如：.is-active，.is-hidden。例如，bulma中的某些修饰语实际上以is或has开头。如果将ThemeRules作为单独的类使用，则使用theme-前缀，例如.theme-a-background、.theme-a-shadow。.layout-header{}.layout-container{}.layout-sidebar{}.layout-content{}.layout-footer{}也可以自定义.todolist{}.todolist-title{}.todolist-image{}Vue中的单个.todolist-article{}文件实际上是一个模块。添加scoped后，它就会有自己的moduleID，相当于添加了这样一个前缀，react还有一个叫CSS-BLOCKS的东西。好像CSS-BLOCKS只能用在react中。官网上没有单独使用的例子。它编译出来的类名会自动缩短。笔者对react经验不多，所以没有对这个框架进行真正的实践和研究。通过作用域来约束作用域，通过状态来创建状态，比如活跃状态，不可用状态等等。但是，它也有一些缺点或强约定。有些伪类不支持嵌套，还有属性选择器、id选择器等:scope{}:scope[state|enabled]{}.sub-element{}//任意值，包括没有值。sub-element[state|color]{}//特殊值.sub-element[state|color="red"]{}.sub-element[state|color="blue"]{}.sub-element[state|color="yellow"]{}映射到jsx时，这样使用。:scope{}:scope[state|enabled]{}.button{}.icon{}.icon[state|inverse]{}

{{value}}AtomicCSS就像一个函数调用，在class和感觉像一个邪教。不过在js中感觉正常，被Block-CSS接受。

.Fl$start${浮动：左；}.M$10px${margin:10px;}ITCSS就是用这个规则来写嵌套少的sass。设置可覆盖的配置项Basic（重置样式）Color（基调）Typesetting（行高、字体、字号）Animation（动画帧）Toolutilsfunction函数（由@function定义）placeholder（sass中以%开头,选择器的多路复用)混合宏(mixin,在sass中以=开头)媒体查询sass混合宏=from($device)@mediascreenand(min-width:$device)@contentsassfunction@functionpowerNumber($number,$exp)$value:1@if$exp>0@for$ifrom1through$exp$value:$value*$number@elseif$exp<0@for$ifrom1through-$exp$value:$value/$number@return$valuevendor，懂php的应该不陌生这个文件，noder可以理解为node_modules。即通过npm、reset.css等方式安装的第三方工具包。对象一般都有命名空间（o-），Object的缩写，所有页面都使用对象类，比如容器、布局等。o-pageWrap它避免了如果要操作整个页面的文本内容区域或内部容器，则需要选择htmlo-gird网格布局。Element元素，e-开头，component，c-开头的scope，s-开头的scope，p-开头的pattern，组件的组合，不可重用的结构。其他命名空间是-和js-，是-表状态，js表示javascript绑定事件。说了这么多，你喜欢哪一个呢？本css框架不涉及任何css编写规范。这些在实际页面开发中用的比较多，而不是框架开发。给所有组件加一个c-命名空间感觉很奇怪。