!如何组织css一:css的API 属于基础部分,这部分的能力用“对”和“错”来评判. 比如说把文字设置为红色,只能用color:red:这种写法是对的,其他任何写法都是错的. 二:css框架 不能用“对”和“错”来评判,我们会用“好”.“比较好”.“很烂”.“非常棒”这样的字眼来评判. 按功能划分:控制字体的css集中在font.css文件里. 控制颜色的css集中在coloor.css文件里. 控制布局的css集中在layout.css文件里. 按区块划分:将头部的css放在head.css…

前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性. 如何组织CSS?一般常用的方法是按功能划分,分为三大类: 1.base类 base类是css最底层的类,也就是通用原子类,具有高度可移植性.精简.通用,基本不需要维护.内容主要是一些CSS重置代码和常用的类,如.w100{width:100;},.fl{float:left;display:inline;}之类. 2.c…

编写CSS容易. 编写可维护的CSS难. 这句话你之前可能听过100次了. 原因是CSS中的一切都默认为全局的.如果你是一个C程序员你就知道全局变量不好.如果你是任何一种程序员,你都知道隔离和可组合的模块是构建可维护系统的关键. 为了试图帮助人们构建可维护的CSS,已经有很多CSS指南了:SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS,Atomic Design, Maintanable CSS, rscss, 并且可能还有 更多. 那么,CSS的问题是什么? spa…

编写CSS容易. 编写可维护的CSS难. 这句话你之前可能听过100次了. 原因是CSS中的一切都默认为全局的.如果你是一个C程序员你就知道全局变量不好.如果你是任何一种程序员,你都知道隔离和可组合的模块是构建可维护系统的关键. 为了试图帮助人们构建可维护的CSS,已经有很多CSS指南了:SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS,Atomic Design, Maintanable CSS, rscss, 并且可能还有 更多. 那么,CSS的问题是什么? spa…

BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔…

1.简单组织(见习级) projectName ├─css | └style.css 优点:简单,单一文件,适合一些简单项目. 缺点:过度集中,没有模块化,无法适应大型项目. 2.公共组织(见习级) projectName ├─css | ├─index.css └base.css 优点:抽取公共样式,适合一些小中型项目. 缺点:重用代码低,没有模块化,无法适应大型项目. 3.页面集中组织(见习级) projectName ├─css | ├─about.css └index.css 优点:按页…

css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色.通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴.下次要修改就得全部查找批量替换,其实不是很方便. 本文即将介绍的less将让我们更快更方便的编写css代码. Less是什么 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能…

HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript ……等等 3.W3C倡导的Web结构要符合以下要求: XHTML负责内容…

简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端灵活的MVC框架,代码具有复用性: web标准:结构.样式和行为的分离:理想状态下,网页源代码由html文件.css文件和js文件组成! 高质量的代码:精简.重用.有序,符合web标准: js要有常用效果和功能的积累:js类库封装了跨浏览器兼容的特性并扩展了功能: 最基本要求是CSS能兼容IE6.I…

HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用div + ul-li实现导航菜单布局     使用div + dl-dt-dd实现购物版块布局 3.一般的局部布局无非采用如下的技术:     1)div + ul(ol)-li:用于分类导航或菜单等场合     2)div + dl-dt-dd:用于图文混编场合     3)table-tr-td…

如何组织CSS 三层结构:base+common+page 分层目的:减少代码量:便于多人开发和维护 1.base层 最底层,一般设置文件为只读,与具体的UI无关,提供: reset功能.因为浏览器对元素的默认样式不同,使用reset可以覆盖掉浏览器的默认样式,使浏览器的起点尽量一致. 粒度最小的通用原子类,避免重复写某些样式,减少代码量. 推荐代码: /*CSS reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fiel…

less 是一种样式语言,它将 css 赋予了动态语言的特性,如变量. 继承. 运算. 函数.less 既可以在客户端上运行(支持 ie6+,webkit,firefox),也可以借助 Node.js 或者 Rhino 在服务端运行. less 做为 css 的一种形式的扩展,它并没有阉割 css 的功能,而是在现有的 css 语法上,添加了很多额外的功能,所以对于前端开发人员来所,学习 less 是一件轻而易举的事情.我们先看下用 less 写的一段 css: @base: #f938ab;…

虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结.下面的浅显的谈一谈在看了<编写高质量代码>中的html和css部分以及搜索网络上一些相关资料对编写高质量的HTML和CSS的一些基本认识. HTML 在说css之前必须先说说html ,没有它css是浮云.就像是要建栋别墅,光有那些装饰品(css)没有房子基本的结构(html)是不可能造出真正好看又实用的别墅的.其实html结构并不是简单的table或一堆堆的div…

如何组织CSS-分层 应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角度,例如按功能划分,或者按区块划分.这里讲一下 base.css + common.css + page.css 的组织方法.将网站内的所有样式,按照职能分成三大类:base.common.page,这三者是层叠结构. 1.base 层-精简通用 位于三者的最底层,提供 css reset 功能和粒…

好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCSS. SMACSS. BEM.这3个词.“如果还不知道这些是什么,请先不要继续看下去”,联想到作者这样友好(gāo lěng)的提醒,作为围观群众,自然要有所回应.所以,本文在这里分别介绍它们. OOCSS.SMACSS及BEM都是有关css的方法论(准确地说,其中BEM应该是一个完整的前端开发理论…

引文 Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(Mixins).操作(Operations)和功能(Functions)等等,最棒的是,Less使用了现有的CSS语法,也就是说,你可以直接把你现成的样式文件“style.css”直接改成“style.less”,他也能正常工作.如下. <link rel="stylesheet/less" href="less/style.less" /…

1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的 4)搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO 5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解 2.Doctype作用?标准模式与兼容模式之间区别? <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html>…

这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正常的 CSS 文件,以供项目使用”,无需考虑浏览器的兼容性问题. 例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 但是,CSS预处理器也不是万金油,原生CSS的好处在于简便.随时随地被使用和调试.…

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情. 变量 请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次. // Less @nice-blue: #5B83AD; #header { color: @nice-blue; } // 输出 #header { color: #5083ad; } ** 甚至可以用变量名定义为变量: ** // Less @fnord…

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面…

一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺序是按照模块中元素的层级关系来处理,从父级元素开始,如果是同一级元素则按照元素在页面的位置从上到下.从坐到右地定义对应的样式.如果多个公用,则先声明公用的样式,然后声明个体样式. CSS排序实践: 对CSS样式排序 推荐按样式属性功能分组排序 推荐在CSS样式代码编写完成并准备嵌入的时候排序 使用如…

HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript ……等等 3.W3C倡导的Web结构要符合以下要求: XHTML负责内容…

HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript ……等等 3.W3C倡导的Web结构要符合以下要求: XHTML负责内容…

没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CSS 代码片段:15 个邪恶的技巧 15 个必学的 CSS 技巧 8 个 CSS 链接 链接小贴士 8 个超简洁 CSS 小贴士 为更好的 CSS 代码:70 个专家级点子 30+ CSS 速查表和快速指南 CSS 大师的 10 个原则 10 个优秀的 CSS 教程和技巧 50+ 简洁的 CSS Ta…

[编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网页,标签中的标签名应该全部都是小写,属性要加上括号,样式和行为不要夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中.理想状态下,网页源代码有三部分组成:.html文件..css文件..js文件.4.所谓高质量的代码,在web标准的指导下,在实现结构.样式和行为分离的基础上,还要做到三点:精简.…

1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定义类型)声明,firefox会按照标准模式来解析网页,但在IE中就会触发怪异模式. 两种模式的差异比较大,比较典型的是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding.border.width三者的宽度相加决定的,而在怪异模式中,width本身就包括了padding和border的…

CSS 预处理器框架 可以按照需求来使用别人的代码 1.sass (compass) 2.less (lesshat/EST) 3.提供现成的 mixin 4.类似 JS 类库 ,封装常用功能 css 预处理器常见问题(详细讲解见上篇博客) 1.常见的 css 预处理器 1.Less(Node.js)  2.Sass (Ruby 但有 Node 版本) 2.预处理器作用 1.帮助更好地组织 CSS 代码 2.提高代码复用率 3.提升可维护性 3.预处理器能力 1.嵌套  反映层级和约束 2.变量…

1.组织的重要性. 首先是要建立两个根文件夹,一个存上线页面的资源,一个存测试页面的资源.所有改动内容都在测试页面的文件夹中进行,在这个文件夹中进行测试.W3C语法检测后(HTML检测网站:https://validator.w3.org/#validate_by_uri:CSS检测网站:https://jigsaw.w3.org/css-validator/),再把测试文件夹的资源覆盖上线文件夹.(这一条只适用于静态网页,即没有任何输入的页面.如果是存着数据的,应该不是这样直接覆盖(数据也被覆…

less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 .less 文件,rel 属性值为:"stylesheet/less" <link rel="stylesheet/less" type="text/css" href="index.less"> // 在引入 .le…

1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处 Sass(Scss):2007,ruby编写 Less: 2009,js编译 1.1 使用流程? 基于CSS的另外一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性 同时CSS文件的组织方式 1.2 预处理器的作用有哪些? 帮…