如何编写轻量级微信房卡斗牛棋牌平台出售 CSS 框架

    本文酝酿了半年，。有很多话要说，但是没有办法谈论它们。托德嗯，轻量级框架如雨后春笋般涌现。我认为每个人都应该总结他们工作中的共同需求，并编写一个适合他们的CSS框架。在以前的文章中，我提到了面向对象的CSS（如BEM、OOCSS、SMACSS）。但是主要是类命名的策略。仍然有很多人对前端框架有肤浅的了解，Bootstrap是后端人员专用的，前端是不必要的等等。我不知道这是从哪里来的，我不喜欢使用框架。起初，也许正如许多人所想的那样，害怕新知识，无法管理，不能解决问题等等。最重要的是，许多人认为框架的样式是固定的，修改它太麻烦，最好按照设计图c来写。温顺的
    为什么使用框架
    
    为什么使用框架答案是显而易见的，就是效率。此外，使用框架或研究框架还有许多其他的含义，例如面向对象思想的具体实现。当我在上一家公司工作时，我开始以最原始的方式编写CSS。项目是类的命名。我认为大多数人根据他们的功能来命名事物，这会产生大量的冗余，并且相同的组件可能被多次写入。让我给你一个个人中心的登录接口的例子。
    
    许多人，包括我开始的那些人，可能会选择用非常普通的方式命名和布置下面的课程。
    复制代码
    
    
    
    U3000、U3000、U3000、U3000
    U3000和U3000
    
    请点击登录。
    U3000和U3000
    
    
    复制代码
    
    但是，了解Bootstrap的人应该一眼就知道上面的图像是媒体对象，并且有一些小细节需要调整
    复制代码
    
    
    
    
    
    
    请点击登录。
    
    
    
    复制代码
    
    为了将文本与图像对齐，可以使用Bootstrap的.media-middle helper类。如果需要根据工作中的要求定制一些辅助类来调整细节，当然这是移动端的示例，您可以选择与移动端f相关的媒体对象游戏制作。
    
    另外，当项目被修改时，原来的修改方法更加悲惨，可以说是一场噩梦，冗长的CSS文件，混乱的功能划分，类名，颜色值等等。阐明了框架的重要性和前端工具的重要性。我得出结论，要么可以熟练地使用框架，要么可以自己实现框架。
    前端框架比较
    
    目前，市场的前框架主要分为重量级和轻量化两大类，主要的权重是Bootstrap、语义、UIKIT、基金会等。轻量级框架有Pure、Skeleton、Miligram等。经常关注前端动态的工程师会发现轻量级框架每年都在陆续出现。在我上面提到的主流轻量级框架之外，还有许多类似的框架。问自己为什么要复制车轮。经过研究，我发现这些轻量级框架中的大多数都不能真正满足工作要求，而且有很多模仿，基本上是Bootstrap的影子。这些轻量级框架有意义吗当然可以。但是从我的角度来看，选择一个轻量级框架不如实现一个框架。因为大多数轻量级框架都像工作总结，基于他们的业务需求。所以大多数都不是通用的。
    
    前端框架的比较主要基于Bootstrap、语义、UIKIT，因为我个人觉得这三种最具代表性，而设计风格也有其自身的特点。基础也被很多大公司使用，但在我个人看来，易用性和DES。框架的IGN风格略逊于其他框架。
    
    其中，引导和语义是面向对象的最佳体现。
    
    让我从Bootstrap的优点开始，不是设计风格，不是模块，不是特殊效果，而是网格、响应网格。Bootstrap的网格在网格划分和类名风格方面都比其他框架有绝对的优势。如果读者看一下Bootstrap的Leaes源文件，他或她会发现Bootstrap在响应网格方面的独创性。实际上，在Bootstrap之前，有许多网格方案，但是给人的印象是，它不够简单，类名太麻烦，以至于无法记住。后来，许多框架，尤其是轻量级框架，大多都有Bootstrap的影子。
    
    现在，我们通过比较几个框架的栅格和按钮来查看类命名策略。
    
    引导程序
    复制代码
    
    
    
    
    
    
    纽扣
    
    复制代码
    
    语义的
    复制代码
    
    
    
    
    
    
    初级
    
    复制代码
    
    基础
    复制代码
    
    
    
    
    
    
    初级
    
    复制代码
    
    乌伊特
    复制代码
    
    
    
    
    
    
    初级
    
    复制代码
    
    纯的
    复制代码
    
    
    
    
    
    
    主按钮
    
    复制代码
    
    通过比较上面的内容，您应该已经发现了这些框架的不同命名策略。
    
    有些人曾经谈到过在因特网上使用框架的简易性。有些人说Bootstrap的类名太长了。然而，通过比较上述框架，在使用预处理器编写框架时，Bootstrap的类并不笨重且嵌套灵活。
    
    语义的类名是最简洁的。通过修改一些属性来编写句子是非常有趣的。但是在编写框架时，太多的修饰符会略显混乱。既有优点也有缺点。
    
    基金会的网格应该是最丰富的，战略上类似于引导，除了分割公共属性，并且您可以查看细节。
    
    UIKIT和Park共享相同的策略，前缀来区分其他框架，但是很明显类名太长了。我在编写框架时考虑了这个问题，但最终我放弃了这种方式。
    关于CSS预处理器
    
    CSS预处理器不是新的，但是有多少人可以实际使用它们呢有多少人熟练使用预处理器特性
    
    我在工作时没有使用预处理器，因为我没有意识到预处理器的好处。主要原因是麻烦，因为编译器不像直接编写CSS那么简单。但是在项目维护的情况下，我们意识到了预处理器的好处。后来在几个项目中试用了预处理器，但是模块化方法不是很清楚，作为一个工具，预处理器可以模块化CSS，那么我们应该如何划分模块呢另外，预处理器有很多特性，但是大多数人只是从变量和嵌套开始，其他特性很少使用。
    
    目前流行的预处理器较少，SASS和手写笔。选择哪一个完全取决于你的习惯。我第一次学习Liess是因为Bootstrap，但我选择Sass是因为习惯，然后Sass更全面。
    
    不管是工作还是编写自己的项目，都需要构建一个项目环境，即安装一系列NPM包。以后的发展将是远远不够的。
    
    Miligram这个轻量级框架在Github上非常流行，但是说实话，它并不十分有用。但是构建这个框架的方法值得学习。尽管CSS对于很多人来说非常简单，但是对于编写一个框架来说，还是很困难的，这次您需要向s.优秀的框架。
    
    用于编写框架的NPM如下：
    
    ——自动固定器
    ——节点SASS
    NPM运行全部
    ——里姆拉夫
    --兑换
    
    其实最重要的是一个节点sass，其他的CSS文件都是通过生成和修改来辅助的，我们感兴趣的话可以去NPM的官方网站搜索这些插件，了解具体的用法，如果你不懂可以给我留言，我不会沉思。
    编写轻量级框架
    
    最后是本文的重点。
    
    我给大家简单介绍一下。我把零食命名为我写的框架。它最初是为了快餐。它主要表达了简单性的含义。虽然它是一个轻量级框架，但我不想使用轻量级作为噱头。毕竟，轻量级意味着缺乏功能和遗漏。这个框架的意义在于更多的交流和学习。我试着学习其他框架的优点，尽量简化类名，并尝试探索一些更通用的组件。
    
    大多数轻量级框架都是CSS框架，它们不涉及JS部分，主要用于网页的布局。我打算编写自己的框架，因为在工作中有很多重复，所以框架可以很好地将这些分散的组件集成在一起。另一方面，写一个小项目和学习新知识是一件有趣的事情。
    
    去年我想写这个框架，但是因为时间关系，花了很长时间。在写这个框架的时候，我遇到了一个误会。我计划设计一些更前卫的风格，三维按钮，浮动面板等，如下面的图片的风格。
    
    http://Dunbbul.com /镜头/ 524593软界面黑色
    
    但当我间歇性地写下框架时，我逐渐找到了方向。上面的模式只是一个皮肤，不应该一开始就成为编写框架的重点。当然，好的UI设计也是框架成功的一部分。
    模块划分
    
    编写框架的第一步是确定框架中应该包括哪些模块。因为它是轻量级框架，所以模块肯定不像重量级框架那么全面，只有部分核心组件。通过比较一些轻量级框架和总结在工作中，常用的模块包括网格、媒体、按钮、排字、表格、表格、面板和辅助工具。
    
    在常见的组件中，重点是网格、窗体和面板。媒体组件也很重要，但自由发挥的空间很小。我直接使用Bootstrap的媒体组件。
    
    
    命名策略
    
    第一种是类命名的层次结构和结构。类命名一直以来都是我的一大难题，在我开始工作的时候，为了一个众所周知、简洁的类名而抓耳挠腮。在编写框架时，我尽量避免与Bootstrap的类名重叠，但是我无法避免它们。与其他框架相比，这种情况不可避免地发生。毕竟，类名有一定的规律性和层次性。在这一点上，我更喜欢Bootstrap的风格。以下是与Bootstrap形式的比较。
    
    Bootstrap的形式结构和类名
    
    水平-水平
    形式群
    标签控制标签
    输入-形式控制
    
    小吃的形式结构与类名
    
    第二排
    形式项目
    标签
    输入字段
    
    表单结构总体上非常好，但有些地方需要修改。有些框架不命名诸如input之类的元素，而是为父类命名。个人质疑这种方法，而没有类名减少了框架编写和使用的灵活性。
    
    第二种策略是装饰组件，例如具有多个上下文（颜色、大小等）的按钮和面板，我用一些简化和一些样式上的语义阴影来编写这些组件。
    
    初级
    …
    …
    
    修改类的策略是一个观点问题，在编写框架的过程中还需要探索哪种方法更好。
    网格系统
    
    演示示例：http://nZBI.GITHUB.IO/SACKE/GY网格
    
    任何框架都必须建立在网格上才能灵活。正如我前面提到的，Bootstrap的本质是光栅系统。编写网格系统需要使用预处理器的循环功能，否则将是毫无意义的重复工作。少于十的人在光栅系统中不使用循环。源代码有些突然，可能是因为作者不熟悉Less的循环，当然Less的循环很弱，使用起来有点尴尬。简单来说，Less没有循环，但是它可以递归实现，而Sass和Stylus有真正的循环。
    
    我写的网格系统也是默认的12列系统，但是结果证明12列网格缺少最常见的列宽（比如10%、20%、30%等等）。例如，下面的CodePen所示的示例无法使用12列网格来完成，所以我又添加了10行网格，但是仍然不能覆盖所有内容，但是它足够灵活。
    
    网格的使用与引导是相同的，除了12行网格之外，还添加了10行网格和均匀网格。科尔级
    复制代码
    
    
    
    
    
    
    
    
    
    
    
    
    
    复制代码
    
    网格没有响应，它只有一个断点，所有的网格都将在小屏幕手机上以单行方式显示。所有方面，网络侧和移动侧的风格差距很大，根据业务需求会比较好的分开。不过，最近我改变了源文件，并预留了扩展方式作为响应。
    形式
    
    演示示例：http://nZBI.GITHUB.IO/SACKEY/AY格式
    
    上面的命名策略已经显示了Snack表单的基本结构，除了它的结构之外，关于它的基本结构没有太多可讨论的。让我们来讨论一下表单中复选框的结构调整。让我们先看看Bootstrap的复选框结构。
    复制代码
    
    
    
    
    复选框
    
    
    
    
    
    复选框
    
    
    复制代码
    
    以上两种结构都不能偏离，稍微偏离就会混淆风格，灵活性差。其次，我想知道这两种结构是否可以结合在一起以提高灵活性。小吃的结构如下：
    复制代码
    
    
    
    
    复选框
    
    
    
    
    
    
    复选框
    
    
    
    复制代码
    
    您还可以直接向标签标签添加样式。此外，将输入移动到标签标签没有问题，如下所示：
    复制代码
    
    
    
    
    复选框
    
    
    
    
    
    复选框
    
    
    复制代码
    
    这种结构的一个优点是可以自定义输入样式，如下面的CodePen的SCSS文件所示。收音机的设置与复选框的设置相同。
    
    
    辅助类
    
    辅助类是一系列类的组合，例如大小、颜色值、填充、边距和左右浮动。这在Bootstrap构建的一些后端管理系统中尤其常见，这使得布局更加灵活。下面是一个边界辅助类。
    复制代码
    
    左右边框{
    左边界：1PX实心EEE；
    边界权：1PX实体；
    }
    边界顶部底部{
    边框顶部：1PX实心EEE；
    边界底部：1px固体αe；
    }
    边界左{
    左边界：1PX实心EEE；
    }
    边界权{
    边界权：1PX实体；
    }
    边界顶部{
    边框顶部：1PX实心EEE；
    }
    边界底部{
    边界底部：1px固体αe；
    }
    
    复制代码
    
    有关辅助类的更多信息，您可以阅读本文如何编写通用助手类。
    箱形构件
    
    演示示例：http://nZBI.GITHUB.IO/SACKEY/Y盒
    
    框组件在我整个框架中是一个令人满意的模块。做这个组件的主要原因是认为Bootstrap的列表组件和面板组件可以集成在一起。当然，这种实践既有优点也有缺点。在后台管理系统的布局中，其命名也是多种多样的，如.、widget、portlet、ibox、card等。每个后台管理系统框架都将对这个组件进行深入的开发，以显示其在布局中的重要性。使用一个适当的类名，考虑很长时间，最后使用box类名，当然，通常不要使用box，因为类名比较宽。下面的CodePen模拟Bootstrap的列表和面板组件。
    
    
    主题
    
    向框架中添加主题很有趣。Snack的缺省主题是白色，因为它喜欢黑色，并且最终添加了夜间主题，这是通过改变组件的颜色编写的。演示文档的页面具有夜间主题。点击上面的红色按钮可以切换主题。
    总结
    
    如果您问我那个框架比较好，我会毫不犹豫地选择Bootstrap。我的工作，最好是根据自己的需要来建造车轮，如果你愿意选择或学习我的框架，那将是我的荣幸。