您现在的位置是：网站首页> 编程资料编程资料

CSS中的层分离编程详解CSS中下拉菜单和表单以及弹出层的简单笔记CSS层透明实现方法css实现鼠标悬停时滑出层提示的方法

2023-10-23 259人已围观

简介 这篇文章主要介绍了CSS中的层分离编程详解,包括OOCSS等编程方式中的层的分离式设计,需要的朋友可以参考下

随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。

在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里，我将着重于讨论使用一种方法或者一个命名规则所带来的好处。

这里有很多可供使用的前端方法和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。
命名规则

一个可靠命名规则的重要性是不可忽视的。就像组织结构带来的好处一样，这里有很多性能上的优势让你能够坚持地，有责任感地去命名你的选择器。

正确使用任何规则将会在大型项目减少与CSS相关的忧虑而发挥关键的作用
BEM

最流行的命名规则之一就是BEM（block：块，Element：元素，Modifier：修饰符）。通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加简单了。BEM还有助于消除页面和body类对嵌套或者附加样式依赖。

CSS Code复制内容到剪贴板
  1. .block {}   
  2. .block__element {}   
  3. .block--modifier {}  

上面的例子展示了一个BEM项目的类结构，下划线（__）被用来区分元素，而用连字符(--)是用来修饰元素的。下面是一个现实世界的例子...

CSS Code复制内容到剪贴板
  1. .product-details {}   
  2. .product-details__price {}   
  3. .product-details__price--sale {}  

BEM中的一个圈套是引诱在修饰部分中添加多种用途的样式类。大的，小的，绿色的或者醒目的等修饰选择器被提出引入到标记中，这在不久的将来将会发生改变。

CSS Code复制内容到剪贴板
  1. .product-details {}   
  2. .product-details__title {}   
  3. .product-details__title--small {}  

像大多数的多用途类一样，在项目一开始的时候意图很明显，但是当一个设计改变的时候常常会导致矛盾的CSS。
SUIT

Suit起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来。

CSS Code复制内容到剪贴板
  1. .u-utility {}    
  2. .ComponentName {}    
  3. .ComponentName--modifierName {}    
  4. .ComponentName-descendantName {}    
  5. .ComponentName.is-someState {}   

通过消除潜在的混乱连字符号连接元素名来使得选择器的可读性更强。

CSS Code复制内容到剪贴板
  1. .ProductDetails {}   
  2. .ProductDetails-price {}   
  3. .ProductDetails-title--sale {}  

加前缀

如果你不想使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。

CSS Code复制内容到剪贴板
  1. .s-product-details {}   
  2. .t-product-details {}   
  3. .js-product-details {}  

这种方法使得它很容易的在表象类中辨别结构类但是只是简单的写和理解。在上面的例子中的结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。

元素可以以同样的方式定义或者使用基类和修饰类...

XML/HTML Code复制内容到剪贴板
  1. <button class="button">Buttonbutton>  
  2. <button class="button button-checkout">Checkout Buttonbutton>  
  3. <button class="button button-search">Search Buttonbutton>  

从一方面说明在Sass partials中加前缀对于当在文件夹中删除必要的存储partials时对一个很大的项目文件定位是很有帮助的。这种方法被使用于ITCSS中。

你选择什么都没有问题，重要的是记住你的选择,并将他们应用到整个项目中。
方法

随着命名规则的增加，CSS变得更安全，更高效了。由于较小的CSS文件和更少的权重问题，所需要的嵌套选择器将会减少。

尽管有这些改进你仍可以像下面的这个例子使用复制的CSS来完成样式。

CSS Code复制内容到剪贴板
  1. .product-details__title {   
  2.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   
  3.     text-transform: uppercase;   
  4.     color: #333;   
  5. }   
  6. .latest-news__title {   
  7.    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   
  8.    text-transform: uppercase;   
  9.    color: #FF0000;   
  10. }  

这就是前端的方法的由来，将你的CSS划分层次会有助于防止重复的样式和大分组的选择器。共同或者基础的样式被分开定义，而更具体或者修饰的样式被添加到继承样式的顶部。
OOCSS

面向对象CSS有两个主要的原则第一是表现与结构分离，第二是容器与内容分离。这两个原则的设计是用来通过创建可复用的CSS模块以提高性能。

表现与结构分离：

CSS Code复制内容到剪贴板
  1. "box-padded product-image">
  
  • "box-padded product-description">
    •   
  •   
  • .product-image {   
  •        width: 400px;   
  •     overflow: hidden;   
  • }   
  •   
  • .product-description {   
  •     width: 500px;   
  •     min-height: 200px;   
  •     overflow: auto;   
  • }   
  •   
  • .box-padded {   
  •     background: #FFF;   
  •    padding: 10px;   

  • 上一篇：全方位了解CSS3的Regions扩展css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    下一篇：浅谈CSS响应式图片运用中的srcset属性

    • 相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网