深圳幻海软件技术有限公司 欢迎您!

  • 记录--记一次前端CSS升级

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助目前平台前端使用的是原生CSS+BEM命名,在多人协作的模式下,容易出现样式冲突。为了减少这一类的问题,提升研效,我调研了业界上主流的7种CSS解决方案,并将最终升级方案落地到了工程中。样式冲突的原因目前遇到的样式冲突的原因,其实根本原因还

  • Angular样式隔离(style isolation)及选择器(:host, :host-context, ::ng-deep)的使用

    1.Angular样式隔离Angular样式隔离的好处最最要的一条就是CSS的可维护性。当没有样式隔离时,我们创建一个组件并添加样式后,可能会影响到其他的组件样式,而且很有可能查找不出问题所在。虽然我们可以想出办法来避免样式被覆盖,但是可能会引发CSS的可维护性问题。Angular的视图封装(Vie

  • CSS基本用法

    1、什么是CSSCascadingStyleSheet级联样式表。表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。   2、CSS的发展史  CSS1.0读者可以从其他地方去使用自己喜欢的设

  • JS样式获取的封装方法

    样式获取style属性只能获取标签内容style属性里面存在的一些样式如果你需要获取对应的全局所有地方设置样式我们就需要采用一些方法getComputedStyle方法属于window的方法Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含

  • 5000字干货!超全面的B端设计规范总结

    不知不觉已经深耕在B端这个领域3年有余,很多人接触过B端后会觉得乏味,因为B端的设计在视觉上并没有C端那么有冲击力,更多的是结合业务逻辑,设计出符合业务需求的交互,以及界面排版的合理性,达到产品的可用性、易用性、好用性。由于业务的复杂性,功能实现的难度程度相比C端会高很多,但是B端系统会有很多相似的

  • Material Design之字体排版(Typography)

    Roboto自从IceCreamSandwich发布以来,Roboto都是Android系统的默认字体集。在这个版本中,将Roboto做了进一步全面优化,以适配更多平台。宽度和圆度都轻微提高,从而提升了清晰度,并且看起来更加愉悦。Roboto字体-1.21MB(.zip)标准样式(StandardS

  • CSS新规范:样式查询

    最近,Chrome团队发布了对一个新的CSS规范的实验性支持,即样式查询。简而言之,它让我们查询容器的样式,而不是只查询尺寸。在查询容器尺寸不够的情况下,这可能很有帮助。CSS容器查询介绍样式查询之前,我们先来回顾容器查询。CSS容器查询(ContainerQueries)是一项新的CSS功能,允许

  • 为什么我要含泪挥别 CSS-in-JS?

    这篇文章将深入探讨最初吸引我使用CSS-in-JS以及后来又决定放弃的原因。如果你对CSS-in-JS背后的逻辑感兴趣,建议耐心看完本文。CSS-in-JS是什么?顾名思义,CSS-in-JS允许你通过在JavaScript或TypeScript代码中直接编写CSS来设置React组件的样式:复制/

  • 我们一起聊聊可扩展 CSS 的演变

    大家好,我是 CUGGZ。自Web诞生以来,我们编写和思考CSS的方式发生了巨大变化。从基于table的布局到响应式网页设计,已经走过了漫长的道路,现在进入了由现代CSS功能提供支持的自适应布局的新时代。而管理和组织CSS一直具有挑战性,很难达成共识。深入研究在大型项目上扩展CSS的问题,

  • 为什么和 CSS-in-JS 说拜拜

    本文是由Emotion的第二大活跃维护者Sam分享,本文第一人称都指的是Sam。Emotion是一个广泛流行的CSS-in-JS库,用于React。文章Sam会带大家深入探讨CSS-in-JS最初吸引人的原因,以及为什么作者(以及Spot团队的其他成员)决定放弃它。什么是CSS-in-JS?顾名思义

  • 整洁架构之CSS

    作者 | 李光毅在历数技术进步的代价时,弗洛伊德遵循的路线使人感到压抑。他同意塔姆斯的评论:我们的发明只不过是手段的改进,目的却未见改善。——尼尔波斯曼《技术垄断》虽然开发工具早已经从preprocessor进化到了styledcomponent甚至是functionalcss,

  • 漫谈 CSS 方法论

    大家好,我是CUGGZ。CSS方法论是一种面向CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定,并且在组织CSS时可提供相应的指南,从而提升代码的性能、可读性以及可维护性。根据Stateof CSS 2020的调查结果显示,目前使

  • 我们是怎么在项目中落地 Qiankun

    背景由于业务增长,团队拆分,我们需要将原有系统的一部分模块(Vue实现)迁移到另外一个系统(React)中。但两个系统技术栈不同,导致重构成本变大,但业务又希望在短期内看到效果,后面可以增量的重构。要求是对用户无感知的,真正将两个系统融合到一起。经过技术调研,我们决定用微前端的方式实现。微前端是一种

  • 为什么越来越多的人开始选择使用Tailwindcss

    什么是tailwindcss首先它是一个通用的类css框架,它内置了很多方便使用的class,比如text-center,pt-4,rotate-90,通过使用这些内置的样式,你可以非常快速地构建出一个网站的雏形。tailwindcss从大小,颜色,字体,阴影方面去优化你的界面,你可以通过它们的组合

  • CSS 性能优化的五个简单步骤

    为了加快网页的渲染速度并改善最终用户体验,请考虑以下五个CSS性能优化技巧。1.使用内联样式如果给定样式仅用于单个特定页面元素(例如图像滑块或轮播)并且该组件仅用于站点中的少数页面,请使用内联样式而不是通用加载的CSS文件。这不仅会减少外部样式表的大小,还会减少在不使用该组件的页面上发生的CSS选择

  • 如何写出更“美”的CSS代码?

    CSS(全称 C ascading S tyle S heets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一。基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且分散,很难做到精通。在我们日常开

  • CSS in JS 新秀:Vanilla-Extract 浅析

    本文转载自微信公众号「Tecvan」,作者江江。转载本文请联系Tecvan公众号。前言2021年,vanilla-extract作为黑马登顶了css-in-js满意度榜首(虽然使用率仅为1%),号称是一个类型安全、高度兼容TS场景的库,国内相关讨论还很少,稍微看了一下还挺好用的。介绍官方文档:htt

  • 我的 CSS 就是这么可爱——如何组织 CSS

    本文转载自微信公众号「微医大前端技术」,作者许浩星。转载本文请联系微医大前端技术公众号。写在前面开局先问大家一个问题:前端三剑客分别是谁?不用说,绝大部分前端开发都会脱口而出:HTML、CSS和JavaScript。要是这个还需要犹豫的话,朋友自己去墙角反省一下自己[手动狗头]。既然被称为三剑客,那

  • 如何使用可选样式表为网站或应用添加黑暗模式

    为你的站点添加黑暗模式黑暗模式已经应用在了许多流行的网站和应用程序中,诸如Twitter、Instagram、WhatsApp和YouTube等。但是你该怎样在自己的网站上添加这种模式呢?我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择自己喜欢的颜色主题,从而改善了用户体验!例如,下面是在T

  • 「前篇」JavaScript如何获取一个元素的样式信息

    关于JavaScript如何获取一个元素的所有样式值,及设置一个元素的样式值,所有相关知识点,看这两篇够了。记住了,都很简单的。来来来...想要获取一个元素的一个或者多个CSS样式设置,这应该是搞前端的都碰到过的一件事。如果你平时用JavaScript实现过一些动画效果什么的。肯定就会知道一个问题:

推荐阅读