zoukankan      html  css  js  c++  java
  • div+css命名规则

    作为一个前端菜鸟,进公司的第一个项目就是中途从外包公司接过来的公司网站,在别人写过了的基础上接着写,命名什么的,简直不要太痛苦。

    目前,这个网站已经完成,但是被后台人员指出命名不规范。有心想解释一两句,但是又觉得的这一个月在命名上的折腾,的确让我对命名规范都模糊了不少。

    在看了一些css样式命名规则后,我做了一些笔记。

    一、命名规则说明

    1.所有的命名最好都小写
    2.属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
    3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
    4.空元素要有结束的tag或于开始的tag后加上"/"
    5.表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
    6.<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
    7.给每一个表格和表单加上一个唯一的、结构标记id
    8.给图片加上alt标签
    9.尽量使用英文命名原则
    10.尽量不缩写,除非一看就明白的单词
    11.在外框楼层太多,无法具体命名的情况下,可以使用af、bf、cf来区别命名

    二、相对网页外层重要部分CSS样式命名

    外套 wrap ------------------用于最外层
    头部 header ----------------用于头部
    主要内容 main ------------用于主体内容(中部)
    左侧 main-left -------------左侧布局
    右侧 main-right -----------右侧布局
    导航条 nav -----------------网页菜单导航条
    内容 content ---------------用于网页中部主体
    底部 footer -----------------用于底部

    三、注释

    /* Header */
    内容区
    /* End Header */

    四、常用的css命名

    页面外围控制整体佈局宽度:wrapper
    布局:layout
    头部:header/head
    底部:footer/foot
    导航:nav    二级导航:subnav
    侧边栏:sidebar      左侧边栏:leftsidebar    右侧边栏:rightsidebar
    栏目:column
    主要内容区:main       内容区:content/container
    菜单:menu   子菜单:submenu
    左右中:left right center
    登录:login
    登录条:loginbar
    标志:logo
    广告:banner
    热点:hot
    新闻:news
    箭头:arr/arrow
    下载:download
    搜索:search
    搜索输入框:searchInput
    搜索结果:search_result
    搜索条:searchbar
    友情链接:friendlink
    滚动:scroll
    下拉:drop
    下拉菜单:dropmenu
    标签:tags
    文章列表:list
    提示信息:msg/message
    摘要:summary
    当前的: current
    小技巧:tips
    图标: icon
    注释:note
    栏目标题:title
    加入:joinus
    指南:guide
    服务:service
    注册:regsiter
    状态:status
    投票:vote
    常见问题:faqs
    编辑评论:editor_review
    关键词:keyword
    博客:blog
    论坛:forum
    合作伙伴:partne
    网站信息:siteinfo
    网站地图:sitemap
    版权:copyright
    商标:branding

    下面是一些关于产品类的命名:

    产品:products/product
    产品价格:products_prices
    产品描述:products_description
    产品评价:products_review
    最新产品:news_release
    生产商:publisher
    缩略图:screenshot

    注意:

    在命名时使用id还是class都可以,但我们最好遵循,主要的重要的特殊的最外层的盒子用id命名,其它都用class命名,同时考虑命名的css选择器在HTML中的可重用性。

  • 相关阅读:
    解决成本的错误和问题
    DQM Serial Sync Index Program ERROR
    客户信用控制请求
    现有量,在途量,可用量,可保留量
    作为一位Vue工程师,这些开发技巧你都会吗?
    vue父子组件状态同步的最佳方式续章(v-model篇)
    vue-grid-layout拖拽布局实现空位添加新元素
    小程序保存图片到本地
    为 React 开发人员推荐 8 个测试工具、库和框架
    Deno会在短期内取代Node吗?
  • 原文地址:https://www.cnblogs.com/fanyx/p/4881860.html
Copyright © 2011-2022 走看看