关于 CSS 的重用性

  使用 CSS 大概也有三四个月了,仔细回想了一下这三四个月所写下的CSS,发现都是挺杂乱的。几乎页面的任何一个元素,都有它自己的style,满篇的

float:left;

display:block;

color:#666;

  没有 一种看到就很清爽的样子,而且 给 CSS 文件的大小带来很大的影响。

  回想了下,其实大不必这样,可以采用 诸如以下的代码,来提高重用性,也能让页面的可读性变得更强!

  

fl{float:left;}
fr{float:right;}
w1200{width:1200px;}
black {color:#000;}
bold {font-weight:bold;}

  CSS 这样写后,只需要在 需要该样式的元素的class,把class 添加上去即可。

  <div class="fl w1200 black bold"></div>

  不过虽说这样会提高 CSS 的重用性,能省下CSS里不少的语句,但不是没有弊端的!

  如果需要 字体颜色 从 .black 改为 .red ,这时候是将 页面上的 class 全部换成 red 还是 直接去CSS里把 black{color:red;} ?

  前者费心费力,后者更是不现实。

  所以,个人理解为   CSS 可以稍微提高 重用性,但是不能太依赖,不然以后修改起来,工作量也不少!

时间: 2024-08-05 03:04:47

关于 CSS 的重用性的相关文章

CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy

CSS垂直翻转/水平翻转提高web页面资源重用性

原文:www.zhangxiyu 一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; }

组件的重用性

什么是组件的重用性? 我们把一个大的功能拆分为一个一个的小模块,比如按钮.表单.下拉框.轮播图等. 提高组件的重用性有什么好处呢? 1. 写更少的代码. 2. 减少开发时间. 3. 代码的bug更少. 4. 占用的字节更少. 为了保证数据的正确性,我们可以对props的数据进行验证,验证方法如下: React.createClass({ propTypes:{ optionArray : React.PropTypes.array } }) React 允许你为组件设置默认的props: var

CSS继承性+层叠性+盒子+浮动

CSS继承性+层叠性+盒子+浮动 CSS继承性 <style> div{ color: pink; font-size: 30px; width: 500px; background: green; padding: 100px; } p{ color: red; } </style> <div> <p>我们都是好孩子</p> <ul> <li> <p>我们都是栋梁之才</p> </li>

CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

Hibernate的CRUD重用性

1.在研究了hibernate框架之后,准备完成一套Hibernate的CRUD操作,并且让其具有高度的重用性.在复杂查询方面,hibernate可谓是各种不方便,因此查询方面,利用java反射做出一套根据对象属性来动态查询数据的小框架. 2.先做出可行的设计图 3.具体的实现过程 1 package com.framework.common.dao; 2 3 import test.framework.common.PageEntity; 4 5 import java.util.List;

css的层叠性(权重问题)

1.css的层叠性(很多公司如果要是有笔试,一定会考层叠性) 解释:就是css处理冲突问题的能力. 特点:所有的权重计算没有任何兼容性问题. 2.权重计算问题 下面我们看一下这个代码 <!DOCTYPE html> <html> <head> <title>权重计算问题</title> <meta charset="utf-8"> <style type="text/css"> /*

软件的重用性的高低就取决于它的耦合程度的高低

一个软件,它具有许多类,类与类之间需要互相调用,一旦某个类与另一个类具有紧密耦合关系的时候,这个软件的重用性就会大大降低.所以一个软件的重用性的高低就取决于它的耦合程度的高低. 耦合度:程序模块之间的关联.依赖程度. 在设计过程中提出:当设计这个软件的体系结构的时候,就发现了这个软件的逻辑运行部分(SimpleRouter类)和输出部分(SimpleRouterFrame类)不能很好的结合起来.即:我们不得不将程序界面的引用(reference to SimpleRouterFrame)一层一层

Class撑起了OOP世界的天。Class类是OO的基本单元,OO的世界都是通过一个一个的类协作完成的,提高软件的重用性、灵活性和扩展性(转)

引言 在OO的工作中,我们一定会涉及到类,抽象类和接口.那么类和抽象类以及接口到底扮演的什么角色? 本文主要是从人类社会的角度阐述类与抽象类以及接口的“社会”关系,从而让我们抛弃书上的那些死记硬背的概念,快速理解他们的区别与联系? 如果大家觉得还有必要把这块更新的更好,还请多多反馈. 如果觉的对您有用还请点击 “推荐”下,我会持续更新更多新的内容. 古老的传说 相传盘古开天劈地后,女娲一天在黄河边梳头时,突发奇想以泥土仿照自己抟土造人,创造并构建人类社会.后来又替人类立下了婚姻制度,经过一代又一