Detailed explanation of semiotics in Html/CSS

Based on theories such as Saussure's philosophy of language, this article argues that the class attribute in CSS is unnecessary.

The benefit of CSS is that HTML elements can be styled in various styles without relying on class attributes. This article attempts to prove that class attributes are outdated and not suitable for layout. Not using classes can train us to create more usable and reusable content.

What if two elements of the same type are similar if they appear in the same context?

Saussure's understanding of language as a system is based on two basic relations; paradigm and segment (aggregate and composition):

Paradigm

A paradigm is a group of words that have functional similarities but subtle or radical differences in meaning. For example, "the crab is next to the lobster". The word "located" belongs to a paradigm of substitution words, and can also refer to "resting at", "crouching at" and "standing at", which is a substitution relationship.

In English there are certain rules for substitution, verbs cannot be replaced with nouns, just like in HTML, inline elements (which represent an action verb like inline) cannot always be replaced with block-level elements (nouns).

Segment

A paragraph is basically a structural segment consisting of paradigmatic choices. In English, sentences, paragraphs, chapters, and books are all segments. In HTML, a block of code consisting of elements of your choice can be considered a paragraph.

Each segment has its own semantic system, and smaller segments can belong to larger segment systems, just as a paragraph can belong to a chapter.

usefulness?

Saussure's language model can recognize or write terabytes of novels, fiction, essays, and plays without having to invent new words or redefine old ones. If this model is good enough for natural languages ​​like English, then it should be good enough for simple metalanguages ​​like HTML. Of course, new words are coined over time, just as new elements are slowly introduced into the HTML specification, but this is done through careful deliberation and consensus. There is no such authorization process for classes.

The Saussurean model gives us plenty of room for elegance and invention and prohibits us from making the wrong choices. By styling the elements that make up our document based on their content and what and where, it becomes extremely difficult to mislead or confuse the user; all we’ve done is use CSS to display the inherent structure of the page.

The importance of context

From a semiotic perspective, perhaps the only real difference between two similar things is their context: the environment in which they are found. Natives of England and France are genetically similar but culturally different. Their national backgrounds make them different in a number of noteworthy ways.

The following Html/CSS:

<font><i>// HTML:</i></font><font>

<article>
   <h1 <b>class</b>=</font><font>"main-title"</font><font>>Article Title</h1>
   <aside>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1>
   </aside>
</article>

</font><font><i>// CSS:</i></font><font>
.main-title {
   font-size:30px;
}
</font>

Creating the .main-title class, we created a translator to help us easily style all top-level headings similarly. However, the two headings h1 in our example are not similar. Anyone who understands the HTML5 parser will know that one heading h1 belongs to the aside group, while the other heading h1 belongs directly to the article. Which of these two relationships is the most important?

Directly belongs to article:

<article>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1>
</font>

Directly belongs to aside, aside belongs to article:

<article>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1>
   <aside>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1>
</font>

The parser will treat the aside h1 heading as just a subheading, which comes after the first heading.

The class in this example is redundant: we could have used the h1 style attribute to set the element's style like font-size: 30px. The key is that if we distinguish the two elements based on context, and the way to distinguish the context is to use a derived selector: aside h1, then the CSS will bind to the structure of the HTML (aside h1 is a structure, h1 belongs to the small paragraph, aside belongs to the large paragraph, the h1 small paragraph is contained in the large paragraph aside), and the appearance of the element will be consistent with its calculated meaning.

Modularity and portability

The method of using the Class attribute is actually an object-oriented method. The object-oriented method is to make an element look the same everywhere, regardless of the environmental background. This is like a British person immigrating to other countries and refusing to speak the local language. This is inappropriate.

I don't think of CSS as object-oriented; I think of it as interface-oriented. The purpose of CSS is not to make individual items look the way we want them to, but to provide an interface for styling HTML documents that is convincing and readable. For optimal understandability of an interface, all components should work together politely, and the overall visual structure should be respected, no matter where the components come from.

In short, our goal should be to truly separate style and content, allowing content to flow between different style interfaces, but the style interface remains unchanged. In any well-formed document, attributes should express the source of the content (class as an element attribute does not express the source of the content, but the type of the content source).

Summarize

The above is the introduction of semiotics in Html/CSS by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!