模块化CSS——在CSS中引入面向对象编程思想       如何划分模块——单一职责    模块化可以让代码高度重用,显著提高开发效率。关于模块化,比较成熟的是编程领域的“类”。在面向对象编程方式中,“类”是个非常核心的概念,可以说面向对象思想的基础就是“类”。关于模块化,“类”有很多成熟的技巧,例
转载 2024-03-10 16:46:18
28阅读
模块的概念(官方)  关于术语的一点说明:请务必注意一点,Typescript里面发生变化,“内部模块”现在成为“命名空间”。“外部模块”现在简称为“模块”,模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等在模块外部是不可见的,除非你明确使用export形式导出,相反,如果想使用其他模块的变量,函数,类等,你必须要导入它们,可以使用import形式模块
转载 2023-12-14 11:39:41
105阅读
1. Base2. Layout3. Module4. State5. Theme1) Base rulesBase rules are the defaults.eg:html, body, form { margin: 0; padding: 0; }input[type=text] { border: 1px solid #999; }a { color: #039; }a:hover { color: #03C; }2) Layout rulesdivide the page into sections. Layouts hold one ormore modules together
转载 2013-09-21 11:36:00
226阅读
2评论
一个页面由基本结构体构成:框架、模块、原件。 框架:是构成页面的基础结构,是页面的骨架。框架就可以描述出一个页面的基本轮廓了。如:index.html最外围有一个div(.g-index),页头(.g-hd),主体(.g-bd)。页脚(.g-ft) 模块:是页面上数量最多的,也是最重要的一部分,是代码复用的主体部分,模块就是按照功能划分的,如:导航栏、轮播图、登录窗口等。模块
原创 2022-10-28 04:23:18
138阅读
CSS Moduless 是一个流行的,用于模块化和组合CSS的系统。 vue-loader 提供了与 CSS Modules 的一流集成,可以作为模拟 scoped css 的替代方案<template> <p :class="$style.red">moduless</p> <p :class="{[$style.red]: isRed}">
CSS
转载 2021-04-18 19:12:59
370阅读
2评论
1.命名规范,如BEMBEM 的意思就是块(block)、元素(element)、修饰符(modifier)。是由 Yandex 团队提出的一种前端命名方法论。2.css in js使用 js 语言写 css,完全不需要些单独的 css 文件,所有的 css 代码全部放在组件内部,以实现 css模块化CSS in JS 其实是一种编写思想
原创 2022-01-30 11:13:20
10000+阅读
1.命名规范,如BEMBEM 的意思就是块(block)、元素(element)、修饰符(modifier)。是由 Yandex 团队提出的一种前端命名方法论。2.css in js使用 js 语言写 css,完全不需要些单独的 css 文件,所有的 css 代码全部放在组件内部,以实现 css模块化CSS in JS 其实是一种编写思想,目前已经有超过 40 多种方案的实现,最出名的是 styled-components。3. css modules使用JS编译CSS文件,使其具备
原创 2021-07-12 11:21:19
241阅读
BEM风格代码案例:
转载 2020-03-02 20:34:00
116阅读
2评论
为什么要CSS模块化
转载 2022-03-22 18:23:54
405阅读
我是从去年开始使用typeScript的,刚开始用的时候也是因为项目使用的ts,所以也是糊里糊涂的用着,一直没系统整理学习过,所以正好借此机会,整理一下,加深理解。一、概念首先呢,它是跟javaScript一样属于一种脚本语言; 其次,它始于javaScript,归于javaScript,属于javaScript的超集,它内部包含了javaScript的所有语法,而且在此基础上还扩展了其他语法,可
目录目录 自述 继承 状态 总结 预告自述  看到好的文章就喜欢转载收藏一波,这会看了一篇《从css模块化——jack_lo》的文章,文章所述内容跟自己此前的很多想法都有不谋而合、思想共鸣之处(你就吹吧你~)。本人此前也没有学习或参考过类似的CSS模块化的文章,纯粹是自己怎么乐意怎么写的状态,实在是惭愧于自己此前写过的代码
转载 2022-11-28 18:48:45
64阅读
在现代的 TypeScript 开发中,模块化是一种重要的编程范式,它允许开发者将代码分割成离散的、可重用的模块。在这样的架构中,如何在模块中定义和共享公共变量成了一个关键问题。本文将随着对这个问题的深入探讨,带您了解在 TypeScript 中如何高效地实现模块化与公共变量的定义。 ### 背景定位 随着项目的扩大与功能的增多,初始的技术痛点逐渐显露。我们发现,公共变量的管理与维护变得愈发复
原创 6月前
84阅读
组件化开发,一般是将重复的代码抽取成一个组件,供其他地方复用,一般情况下,提到组件化开发,都是指前端的组件化开发。模块化开发,一般是将同一类功能模块的代码放到一起统一进行管理,是基于代码层面的,一般情况下,提到模块化开发,都是指后端。JavaScript原始功能在ajax请求的出现,慢慢形成前后端分离。我们通常会将代码组织到多个js中,方便维护。但是这种维护方式,依然不能避免一些灾难性的问题。比如
在前端模块化的开发中,不单单JS文件可以看作模块,像CSS,图片和其他文件也可以看作模块;只不过默认的webpack仅支持JS的模块化,其他不支持,但是可以通过安装不同的loader,来支持不同的文件;比如CSS文件,那就要安装css-loader(加载和解析css)、style-loader(将解
转载 2021-03-27 14:48:00
422阅读
默认情况下通过 import "./xxx.css" 导入的样式是全局的样式,也就是只要被导入, 在其它文件中也可以使用,如果想要导入的CSS文件只在导入的文件中有效, 那么就需要开启CSS模块化,开启也就是修改 webpack 核心配置文件,修改地方和内容如下所示: options: { mod
1、scoped https://vue-loader.vuejs.org/zh/guide/scoped-css.html 2、module https://vue-loader.vuejs.org/zh/guide/css-modules.html#用法 3、原理 module:通过给样式名加h
转载 2018-12-17 12:49:00
132阅读
2评论
什么是css模块化?为了理解css模块化思想,我们首先了解下,什么是模块化
转载 2022-09-11 01:11:47
520阅读
Css Module (推荐) React 的脚手架已经内置了 css modules 的配置: .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等; 在以前我们的文件是这样的 index.css 如果使用了 CSS
原创 2022-05-10 12:12:00
511阅读
我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以在1.5的版本里,为了与ECMAScript 2015里的术语保持一致,“内部模块”现在称做“命名空间”,“外部模块”现在则简称为“模块”。下面摘录自Egret博客的一段详细解释(连接):大体意思就是
转载 2024-06-27 17:45:26
176阅读
Activepieces是一个开源的自动化工作流工具,采用TypeScript构建的现代架构设计。本文将深入解析其模块化架构设计理念、核心组件实现原理以及最佳实践。## 架构设计理念### 模块化设计原则Activepieces采用基于NX构建系统的monorepo架构,遵循以下设计原则:- **单一职责原则**:每个包专注于特定功能领域- **依赖倒置原则**:高层模块不依赖...
转载 10天前
355阅读
  • 1
  • 2
  • 3
  • 4
  • 5