From article of http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
Structural naming convention – in essence – just means that you name (by assigning a class and/or id attribute to them) elements by describing what they are, and notwhere they are or how the look. Its counterpart is called presentational naming which describes the location and/or appearance of web page elements.
This CSS tip discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.
Let’s start with a presentational naming example
To illustrate by way of example, take a look at Example 1 which uses a presentational naming convention.
Example 1: A presentational layout.
What’s wrong about the layout?
There are two major fundamental flaws in using a naming convention such as shown inExample 1.
First, it makes it hard to move things around without affecting the accuracy of your markup.
Although the #top-div
and #bottom-div
will most likely stay in place, a design decision to put the secondary content (#right-col
) to the right of the main content area (#left-col
) completely invalidates the document’s model.
Secondly, the names don’t help describe what the elements are – what they’re forand what they do as part of the overall document.
For example, the link with the class .red-link
in Example 1 describes the color of the link, but not what it’s for.
A realistic example
Let’s pretend I hired a new developer in my team – let’s call him Dave Newbie. I’ve given Dave the task of updating a website that uses a presentational naming convention instead of a structural naming convention.
The site’s CSS is much like Example 1, but instead of only 13 lines of declarations, it’s 500 lines (single-spaced, single-lined, shorthand notation).
I didn’t give Dave any other instructions besides updating the pages and assigning elements the appropriate class or id (I didn’t comment my code, because remember – I like to do things the hard way).
In a web page Dave was tasked to update, he encounters a special class of links with the name .red-link
(as shown in Example 1).
Now he’s scratching his head wondering why these guys have a class of .red-link
…
What if instead of .red-link
, I named it .external-link
?
Dave would know instantly (and if he doesn’t – then I’d have to reconsider his employment) that any links that point to another website gets assigned a link of .red-link
.
And that’s the practical reason for choosing a structural naming convention instead of a presentational naming convention – if not for semantics and best practices – then for helping Dave Newbie know what particular classes and ids mean, not what they look like or where they are (which he can already see anyways – granted that he doesn’t suffer from dyslexia or particular forms of color-blindness).
Let’s rework Example 1 to reflect a (sort of) structural naming convention.
Example 2: A structural naming convention.
In Example 2, I’ve renamed the classes and ids to structurally-descriptive names.
#top-div
has become #header
, #left-col
(short for left column) has been renamed to #main-content
, and so on. That’s much better and more intuitive.
Wait a minute!
After looking at the example, some of you may be saying “Wait a minute Jacob, aren’t#header
and #footer
presentational descriptors?” - some might even modify this question with an abbreviated explicitive and exclamation point like “…WTF!”, and some may go further with “WTF n00b!!”.
Yes, indeed you’re (mostly) right.
But now I ask you this: without any additional information – what does #header
and#footer
mean to you?
Some of the responses might be:
#header
is for…
- logo/branding
- where your primary navigation is
- where the tagline of your website is, etc.
#footer
is for…
- Copyright information
- a repeat of important page links
- auxiliary information or additional site features
Without telling you (or Dave Newbie for that matter), what they mean to me, you already know what they are for and what they probably mean.
That’s because names such as #header
, #footer
, and #sidebar
are well-established.
In a survey of websites of some web professionals, Andy Clarke lists the naming convention used for the structure of these sites, check it out here.
You can see in Andy Clarke’s survey that #header
and #footer
are staples, and are used the majority of time. So they’re instantly recognizable.
We can follow a structural naming convention blindly by instead using #branding
for#header
and #siteinfo
for #footer
– but at the end of the day, I chose to bend the “rules” for the purpose of practicality.
#header
and #footer
still describe the purpose and the structure of those particular elements in the document, exactly like #branding
and #siteinfo does.
In short, Dave Newbie won’t be knocking on my door at 3:00AM in the morning asking me what #branding
means so that he can meet his deadline (and Dave, please call or text next time, don’t just show up in my front door steps).
But for those who are unwilling to compromise, let’s rework Example 2 to a strictlystructurally-named example.
Example 3: Really using structural naming conventions.
Example 3 is fully-structural in naming convention. It describes what the div’s and other elements are for, instead of where they are or how they look. I’ve used Andy Clarke’s suggestions in an article he wrote a ways back.
A few guidelines
Here are a few guidelines to help you name your elements structurally, and these are just that – guidelines. In the end, you have to use what’s best for you and the project at hand.
1. When assigning a class or id, ask yourself “What is this element for?”
For example, if you have a span class that’s meant for captions, you might call it.caption
or .figure-caption
instead of .smaller-text
.
If a particular group of images are banner advertisements, you might want to call the class .banner
or .ad-banner
instead of .sidebar-images
(since they may change locations).
2. Avoid using names that rely on locational or visual aspects of the particular element
In Example 1, we used .red-link
for links that are red, and #left-col
for the column on the left.
Later on, in Example 2 and Example 3, we changed them to .external-link and .main-content.
The practical reason for doing this is that it keeps your HTML markup accurate even if – say – you change the style of the .red-link
class to green or brown.
Of course you can always do a batch find-and-replace if you have a static site,hunting down .red-link
and replacing them with .blue-link
in all of your affected HTML documents, but why rely on that when you can avoid it in the first place with a little forethought.
It also keeps your code (code is used literally here, not to imply that CSS or HTML is programming – which they aren’t) semantic.
You don’t have to change .red-link
in the markup even when you’ve changed the value of the color attribute in the stylesheet, but it would be semantically inaccuratein describing that particular element.
For example, even if it’s called .red-link
and you changed your style declaration to:
a.red-link { color: blue; }
a
elements with the class .red-link
will be rendered as blue despite of their class name (at least in most browsers).
But wouldn’t that be irritating? I know I wouldn’t be able to sleep at night knowing that my .red-link
‘s are being rendered as blue.
And wouldn’t that be confusing to Dave Newbie, the new member of my development team?
If instead of .red-link
or .blue-link
, I used .external-link
, then it wouldn’t matter if it’s red, green, blue, or black – it’ll be accurate as long as I do indeed use them for external links.
3. Use names that are intuitive to you
Earlier, in Example 2, I used #header
instead of #branding
. The reason is because I feel that #header
is more recognizable than #branding
. Notice that even though it can be interpreted as a locational description – I still used it.
I decided to do what’s best for me and what I think is best for the people that might be working on the same project. I bent the “rules” (notice that rules are in quotes because these are more like guidelines, not the law of the land) – so to speak – for the purpose of practicality and general intuitiveness.
Here’s a good guideline for naming classes and id’s intuitively.
Ask yourself, “If I asked Dave Newbie what this class (or id) is for, would he automatically know?”
That’s programming 101, naming variables intuitively so that other programmers will know what the variable holds ($total
instead of $t
) – and that lesson is applicable to CSS naming conventions.
Further reading
The concept of structural naming isn’t new, and there have been wide discussions about the concept. Here, I’d like to share a few resources on the topic to help you further explore the concept.
Structural Naming
In a short post, Eric Meyer discusses his viewpoints on class and id naming conventions, mentioning Andy Clarke’s viewpoint on the matter.
Standardizing CSS class and id names
Michael Meadhra discusses presentational naming conventions and structural naming conventions.
Build for the Future: Bend, Don’t Break
Garret Dimon discusses the foundations of creating a flexible and adaptable website that’s always prepared for changes in the future. He also mentions how HTML markup is the foundation of a website, citing names like left_bar
can quickly be outdated in a design change.
About the CSS Tips series
The CSS Tips series is a group of articles on Six Revisions that focus on a particular CSS tip, concept, or best practice. In each article, I’ll deconstruct a particular tip/standard/best practice and provide the context, benefits, and disadvantages of each.
I believe in learning both theory and practice, as well as striking a balance betweenstrict, uncompromising standards and practicality, so you’ll get a chance to learn the way people generally do it, and why you shouldn’t necessarily follow them blindly.
I’ll present each CSS tip as comprehensively as I can, but I depend on you tocorrect me if I’m wrong, expound on things I skimmed over, clarify things that may be confusing to our fellow beginning developers, and provide your own input on the subject – so I highly encourage you to contribute in the comments.
To see all the CSS Tips articles thus far, you can go to the CSS category.
相关推荐
Semantic-UI-CSS-master
官网下载直接引用semantic.css与semantic.min.css区别3.NodeJS、Gulp方式安装二、测试1.测试代码2.测试结果(成功)三、本节完整代码 官方地址 https://semantic-ui.com 一、使用 1.CDN加速 ```javascript CDN介绍...
前端开源库-semantic-ui-css语义用户界面CSS,仅CSS分布的语义用户界面
The development of the Semantic Web proceeds in steps, each step building a layer on top of another. The pragmatic justification for this approach is that it is easier to achieve ( 71 ) on small ...
Handbook of Semantic Web Technologies 的部分翻译的中文版和对照的英文原版
The Semantic Web community has come a long way since its beginnings in the late 1990s and early part of the twenty-first century. There are obviously many ways of categorizing the progress of the ...
semantic ui 最全的css icon文件,所有 semantic ui 的css都可以找到
Foundations Of Semantic Web Technologies,Foundations Of Semantic Web Technologies
HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages....
In this paper, we propose to segment objects and understand their visual semantics from a collection of videos that link to each other, which we refer to as semantic co-segmentation. Without any ...
understand the new semantic markup available in HTML5 use CSS3 to make sites beautiful without sacrificing clean markup or resorting to complex workarounds employ native HTML5 video and audio in your ...
We present an approach to long-range spatio-temporal ... Experimental results demonstrate that the presented approach increases the accuracy and temporal consistency of semantic video segmentation.
semantic de nitions in the ordinary meta-theory of informal classical mathematics. If, however, the same semantic de nitions are interpreted in an intuitionistic metatheory then the induced modal ...
Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。Semantic UI 特点: 文档和演示... 标签:Semantic CSS框架
学术英语写作论文, 对研究方向进行简要介绍, 本文中介绍了深度学习方法进行的图像语义分割
Despite all the excitement about the Semantic Web, the principles of actually using Semantic Web standards to create useful applications have been buried in tedious documents and e-mail threads....
In order to verify the correctness of the Semantic Web Services composition, this paper proposed a composition model of Coloured Petri Nets which is transformed from OWL-S model. This model can ...
Semantic Scene Completion via Integrating Instances and Scene In-the-Loop
semantic ui css框架