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中的可重用性。

  • 相关阅读:
    牛客网 二叉树的镜像 JAVA
    牛客网 反转链表 JAVA
    牛客网 调整数组顺序使奇数位于偶数前面 JAVA
    Integer to Roman LeetCode Java
    Valid Number leetcode java
    Longest Common Prefix
    Wildcard Matching leetcode java
    Regular Expression Matching
    Longest Palindromic Substring
    Add Binary LeetCode Java
  • 原文地址:https://www.cnblogs.com/fanyx/p/4881860.html
Copyright © 2011-2022 走看看