2018-03-16

HTML分区

我一直有一个感觉，html有一点乱，看不出来；而css有一点乱，就会显得非常乱

• 他们有两个共同点：
  1、都有注释来表述这块区域是什么。
  2、都有类名来描述一块是什么。
• 他们也有两个不点：
  1、HTML有不同的标签名来表示不同的页面内容，CSS没有，它只有类名。
  2、HTML有一眼看上去很直观的缩进来表示层级和关系，但是CSS没有，还好less可以嵌套，但也不易嵌套太深，没有HTML那么的明显。

总之, 要写好css的可以利用很多办法比如：合理的className，后代选择器、B.E.M、还有less的嵌套来表示层级（接下来会一点一点学）。

我还觉得css和HTML是有很强的联系，比如：HTML通过div将内容逐步分区，css只是附加在各个区域的样式，按道理是可以写的很清楚的。

分区：

• 其实我的想法不一定对，但是是我目前觉得对的。就是我觉得CSS命名尽量要定义清除这个什么，要想JS变量命名那样。

• 我经常只以这个东西是什么，如title 代表标题。但是一个页面中可以有几个title，这个title是哪里的？ 比如说是侧边栏的标题，那么就应该写成side-title,侧边栏有些网站中又分为上、下两块，上为广告，下为用户访问列表，那么久应该命名为side-advertise-title。我认为这样才能尽量明确的表示这一块区域的样式写给谁的。虽然写的时候感觉累，但是维护起来时应该会好一点。

我理解的虽然现在是组件化将页面切分，但是在组件中分区就跟简单也是必要的。

以下是我百度到的一些内容及我的理解，用于分区的：

可以讲vue组件分为一下几个区域或类别：

1. 布局（grid）( g- )将组件继续分割为几个区域，通常有头部、主体、主栏、侧栏、尾部等。

我觉得很组件化本来就已经把页面拆分了，很少会有

2. 模块（module）（m-）：通常是一个语义化的可以重复使用的较大的整体，比如导航、登录、注册、各种列表、评论、搜索等！

这一点同上，但是我想到了另一件事情，其实template下第二级的div都可以算是一个子模块。

3.元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

这个经常会遇到，但是应该怎么用呢？nav-unit - btn?我也在思考？资料查阅太少。。。。以前没怎么想过、。。。。。。。
其实我就是只是想要这种效果（感觉很整齐）：

cb79c0cbc473a3157e4c61cdf2fb11c.png

我再想想，明天找个东西边写边看吧。。。。。。。。