一点点说明

简要介绍 本框架的构成。

简介

如题,没别的,就是个css框架, 在之前的自制框架基础上,不断的覆写,修改,还原再修改覆写。 总之,在避免命名冲突和重复的基础上,尽量更接近自然语法的语言和规则去命名。

在重新修订框架的时候,因为要考虑把不同元素和属性区分开来,以及元素和属性的排序方式重新排列,所以大量的阅读了不同框架的文档。 命名规则上,我原本的思路就与 Tailwind CSS 的风格不谋而合,后面我就大量的借鉴和复制了 Tailwind CSS 框架的命名方式。

  • text(文本段落)
  • img(图像)
  • table(表格)
  • form(表单)
  • list(列表)
  • button(按钮)
  • button-color(按钮颜色)
  • position(定位)
  • float(浮动)
  • overflow(溢出)
  • display(显示)
  • width(宽)
  • height(高)
  • font(字体)
  • font-color(字体颜色)
  • padding(内补)
  • margin(边界)
  • border(边框)
  • border-color(边框颜色)
  • background(背景)
  • background-color(背景颜色)
  • container(容器)
  • column(分列)
  • flex(弹性布局)
  • space(间隔)

所有集合:text(文本段落)、img(图像)、table(表格)、form(表单)、list(列表)、button(按钮)、button-color(按钮颜色)、position(定位)、float(浮动)、overflow(溢出)、display(显示)、width(宽)、height(高)、font(字体)、font-color(颜色)、padding(内补)、margin(边界)、border(边框)、border-color(边框颜色)、background(背景)、background-color(背景颜色)、container(容器)、column(分列)、flex(弹性布局)、space(间隔)等等。

注:所有预设都需要考虑响应到不同设备。继承bootstrap对媒体查询的预设,不同于bootstrap的移动端优先,以PC端优先作为默认设备,媒体查询从PC端向下兼容。

命名:在不占用html标签和css属性名称的基础上,优先使用各元素属性结合预设值作为命名的方式。优先使用连字符方式连缀字符(个人认为,连字符命名方式比驼峰命名及下划线命名方式都更具辨识度。)

元素对象:text(文本段落)、img(图像)、table(表格)、form(表单)、list(列表)、button(按钮)、button-color(按钮颜色)。

元素属性:position(定位)、float(浮动)、overflow(溢出)、display(显示)、width(宽)、height(高)、font(字体)、font-color(颜色)、padding(内补)、margin(边界)、border(边框)、border-color(边框颜色)、background(背景)、background-color(背景颜色)、container(容器)、column(分列)、flex(弹性布局)、space(间隔)。

完全没有使用Less和少量使用css通配符。为什么?

权衡了一下,各个预设样式基本都是独立的且相对固定的,没什么变量存在,属性和值也各不相干,没有什么共通点,即使用Less去写,差不多也是一个个的去预设。

整个框架中的预设唯有color最多,本打算使用通配符去匹配写,color虽然在class名称上有重叠,可是属性却各不相同,所以,最终,还是一个个的常规的写法。

只要与bootstrap没有冲突的样式定义,基本不需要优先级。

当然,不能百分百肯定不需要优先级,要看使用场景。需要权重的一般是针对响应到不同设备时,同一个样式的不同表现,如有差异或未达到预期效果,可能需要附加优先级。

目前发布的初稿中,基本没有附加优先级,视情况再作修订。