按布局（sass，pug，gulp，bem）解析任务

我已经知道这种技巧很长时间了，但是我只是在实践中第一次应用了它。 布局存在限制（包装器=宽度：1170像素，红色边框）。 右侧的内容与限制相对应，并且与边框相邻，但是在左侧，图片爬出了边框。 刚开始时这很可怕，但值得进一步了解margin-letf的操作：-100px，并且您已经知道如何解决该任务。 顺便说一句，这是柔韧性，用黄色标记了对象的边界。

我们习惯于将宽度，高度设为100％，这很明显，一切都是自适应的，利用宽度，您可以获得与负边距相似的结果。 只需给后代提供比父母更大的大小（例如，宽度：130％）

对我来说，这可能是最难的事情。



这张照片很好地展示了我的项目，甚至任何项目。 当您编写前一百行时，一切似乎都很简单，并且您没有注意到问题。 因此，您以900行的长度完成了项目，并且出乎您的意料，因此决定滚动浏览文件，或者添加媒体查询。



您为媒体中的元素编写样式，查看网站，却不明白为什么样式无法按要求工作。 为了查找已经花费了15分钟的问题，您检查了gulp中的任务并翻阅了已编译的css文件。

偶然地，偶然地……您会在级联样式表中找到问题，或更确切地说，是将样式应用于元素的方式。 在踏上网络之旅之初，我当然读到选择器具有不同的应用程序优先级。 简而言之，然后对于普通的（div，ul，a，p等）选择器-1点，对于10类，对于标识符100。



仔细检查了所有嵌套之后，我仍然发现错误。 事实证明，您需要监视元素的嵌套，而不要给出最后的含义。

这可能包括css（sass）文件的结构。 有一个“ portfolio”块，它有一堆类型为“ portfolio __ *”的元素，但是在我看来，嵌套中的两个类是多余的。

这是我尝试严格遵守BEM的第一个项目，但是一开始并没有花一分钟的时间进行设计，而是在旅途中提出了一些课程，这导致难以提供支持。



但是，我认为这是BEM的一个很好的例子

我在BEM上的一篇文章中读到了有关此问题的信息，但我本人是第一次遇到此问题。 它与引导程序的问题非常相似，它也有...有很长的类。 如何获得最少的课程数量？

这是默认的btn。



这些已经是修改过的按钮...

考虑到我必须写BEM的事实，项目的一些复杂性就从这里产生。 我已经写过关于长类的文章，这是另一种情况。

页面上有6个相似的元素。 进行媒体查询时，有必要隐藏一定数量的元素。 毕竟，不要为每个对象创建新的类。 我不得不使用nth-child（）伪类。 以前，它仅以裁剪方式使用（子代（1），子代（3），子代（4）等），现在需要隐藏除前两个元素以外的所有元素。 花了5分钟阅读文档后，我使用了nth-child（n + 3），从而获得了所需的结果。



另一个示例，说明如何通过一组选择器获取所需的元素，而不为该元素提供特殊的类。



参见下图。 下一个条目div.1> p将仅选择类别“ 2”的对象，div.3> p将相应地接收类别“ 4”的对象。 图片显示了它是如何工作的。 在层次结构中选择最接近的项目。