作者|jaychen 原文|https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552192&idx=1&sn=5342d6ea6d77
说起 CSS 命名规范,大家应该都很熟悉,或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法,旨在帮助开发人员创建更好的且结构一致的 CSS 模块。
二、相对网页外层重要部分CSS样式命名: - TOP 外套 wrap ------------------用于最外层 头部 header /top----------------用于头部 主要内容 main/content ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 main-right -----------右侧布局 导航条 nav -----------------网页菜单导航条 内容 content ---------------用于网页中部主体 底部 footer -----------------用于底部
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录
最近听说TypeScript3.7添加了对Optional Chaining[2]的支持,然后就想着给鱼头的脚手架ying-template[3]的TS版本升级,然后在命令行发现这样的一句信息:
上文「前端工程四部曲」模块化的前世今生(上)中我们主要介绍了JS模块化相关的知识,对于JS模块化,相信很多人都不陌生,但说起CSS模块化,可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS,但CSS也是前端三剑客不可或缺的一部分,在编写CSS的时候,绝大多数人都是比较随意的,所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。
继 精读《请停止 css-in-js 的行为》 这篇文章之后,我们又读了一篇抵制 css-in-js 的文章,虽然大部分观点都有道理,但部分存在可商榷之处,让我们分析一下这篇文章,了解 css 还做了哪些努力,以及 css-in-js 会如何发展。
我听说很多开发者厌恶 CSS。而在我的经验中,这往往是由于他们并没有花时间来学习 CSS。 CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具。从这点来说,也还算不
安装node-sass就可以,因为有个node-sass,scss文件才能在node环境上编译成css文件。 然后编写scss文件
引用 文章 Let’s Define Exactly What Atomic CSS is 中定义:
BEM(Block-Element-Modifier)是一种 CSS 模块化方法,旨在简化 CSS 编写并提高代码的可读性和可维护性,它将 HTML 元素划分为三个部分: 块(block)、元素(element) 和 修饰符(modifier)。
BEM的关键是,可以获得更多的描述和更加清晰的结构,从其名字可以知道某个标记的含义。于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。
目录 CSS快速入门 简介 语法结构 如何注释 引入方式 选择器 简介 选择器列表 选择器的优先级 基本选择器 标签选择器 类选择器 id选择器 通用选择器(不重要) 组合选择器 后代选择器 儿子选择器 相邻选择器 弟弟选择器 属性选择器 语法 示例 分组与嵌套 伪类选择器 语法 示例 标准伪类索引 选择器参考表 网站分享 CSS快速入门 📷 简介 层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义,CSS用于设计风格和布局。比如,您可以使用CSS来
一开始,Yandex公司推出的BEM,包括了规范以及其配套构建工具。如今提到的BEM主要是指其中的规范,在BEM最新的推广页中,对其的描述为:
在前端开发中,编写干净高效的代码可以使程序员变得更优秀。无论是个人项目、合作任务、敏捷开发项目还是求职测试项目,都很重要。开发者通常会忽视一个基本的部分,那就是实施CSS命名规范,有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。无论你是否意识到,在编码测试或技术面试中,你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此,在本文中,我们将展示CSS命名的最佳实践,以提高代码质量。通过阅读本文,读者应该清楚地了解CSS命名规范及其好处,并熟悉不同的样式命名约定。读者的最终目标是为他们提供可操作的见解和实用的建议,以便他们可以将这些规范应用到自己的开发工作流中,以编写更清晰、更高效的代码。
或者可以这么说,CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验,具体来说可以归纳为以下几点:
最近老大在维护别人的代码时,发现我们团队写的样式各有种的想法及风格,这在后续维护会增加一定的难度,所以老大决定统一样式的会名规范,所以就安排我去调研及实践,下面是我调研的结果。
CSS不仅仅是一门科学,而是一门艺术。 您可以了解选择器的每种组合,并且可以成为每种样式属性的专家,但是仍然无法根据需要布置和样式化网站。
一个web应用是离不开html、css与js,其中css充斥的整个web项目中。css它有一个特定,它是全局的。这样的特性导致的结果是,一旦你在不同的地方定义了相同的css命名,那么它们的样式就会相互覆盖,最终导致的style错乱,从而影响整个网页布局。
css对于页面的美化作用不言而喻,但是在进行前端布局页面的时候,往往对页面样式的命名不胜其烦。
目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。
随着 React 项目日益复杂化、繁重化,React 中 css 面临很多问题,比如样式类名全局污染、命名混乱、样式覆盖等。这时, css 模块化就显得格外重要。
React 使用可重用组件作为应用程序的基本单元。然而,我们有时会编写过于冗长和难以阅读的组件,包括从逻辑到显示呈现的所有内容。这会导致调试和修复困难。
Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 前言 这篇文章我已经酝酿了半年之久,或者说拖沓了这么久吧。想说的东西很多,却又无从说起。如今轻量级框架如雨后春笋,层出不穷。我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。在之前的文章中,我提到了面向对象的 CSS(比如 BEM、OOCSS、SMACSS,详见 http://vanseodesign.com/css/dr
这段代码就是2件事, 把 h3选出来, 然后 把它变成了 红色。 以后我们都这么干。
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
译文 | https://zhuanlan.zhihu.com/p/28085207 作者 | Inessa Brown,
无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的性能,以及设计、制作和更新网站的便利性。 在本节,你将学到如何撰写合乎逻辑的、紧凑的标记,使得你有能力将带宽流量降低50%左右,在减少服务器负担和压力的同时,减少网站的加载时间。通过去除那些表现元素,并改掉那些没有任何好处的坏习惯,我们就可以达到上述的目的。 这些坏习惯折磨着网络中的许多站点,特别是那些将 CSS 代码与主要基于表格的布局混合在一起的
-- 使用@keyframes [关键帧实例名]配置好关键帧; -- 使用animation配置关键帧以及动画过程到完成的时延, 完成动画的定义【写在一个CSS类中(如下的myAnimation)】; -- 在data中定义一个以 上面定义的动画CSS类实例(如myAnimation) 为属性值的 数据字段(如myAnimateData); -- 在dom中使用:class=[以 动画CSS类实例 为属性的 数据字段], 引用这个数据字段(myAnimateData)即可,至此完成动画定义; -- 数据字段(如myAnimateData)中,可以通过对 属性值即动画CSS类实例的 布尔值的 改变, 去控制动画的开关,如下 配置false 为关:
欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。
任何代码编程都有各自特点的常用命名规范,div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展,也有利于让别人读懂你的css代码,让你的页面显得清晰有条理。
稍稍一偷懒,就有近一个星期没有更新了,? 大家五一快乐哈 现在继续上一节课的内容,看下面代码: <!DOCTYPE html> <html> <head> <meta charset="utf
看目录结构清晰明了,由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制,如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题,会产生非预期的页面样式渲染结果。
今天看到一个轻量级的、响应式UI框架:Bulma。它是殿堂级大师Jeremy Thomas开发的框架!
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。
正常流的盒子属于格式化上下文(FC),在CSS2.2中可以是表格、块或内联。 在CSS3中引入了flex跟grid,当然以后会引入得更多。
Jquery类库定义了一个全局函数:JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。返回一个新创建的JQuery对象;
可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。
我们用这三个维度分析下Vue的SFC(Single-File-Component,单文件组件):
Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架,声称可以帮助你更快、更轻松地创建自定义设计。然而,并不是每个人都对 Tailwind CSS 感到满意。事实上,有很多原因让你应该避免使用它,而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因:
选择器就是根据不同的需求把不同的标签选出来,这就是选择器的作用。简单来说就是选择标签用的。
对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul … 特点:总是在新行上开始,高度、行高以及顶和底边距都可控制,宽度缺省是它的容器的100%,除非设定一个宽度 功能:主要用来搭建网站架构、页面布局、承载内容
最近看QQ空间里面的投票功能很使用。点击一个链接就弹出一个层,然后再加载一些投票信息,旁边的区域变成灰色不可用状态。其实这不算什么高深的技术,只要在ASP.NET中利用JQuery结合一般处理程序ASHX即可搞定了。
步入 2022,CSS 的新特性层出不穷,而最近在 CSS 圈最受瞩目的新特性,非 CSS @layer 莫属。
整理了一些在CSS(层叠样式表)中的知识点,或许你曾看过一些什么“万字总结”、“面试必看”,但还是希望更多同学能够沉下心来学习,不仅仅满足于停留在“API工程师”的层面,多从CSS约定的规则去解释现象。
网页设计是网站建设中的一个重要的方面,网页设计包括了网站文章内容的更新一集网页视觉效果的设计,是需要长期专人维护和管理的一个过程。div也就是division,是一种常用的HTML 网页当中的重要元素。主要作用是分割网页当中的文档。那么网站建设设置两个div 如何操作呢?
领取专属 10元无门槛券
手把手带您无忧上云