CSS of our days

The best practices of styling elements can now be expressed by the following theses:

1. Try to stylize elements so that their visualization does not break when moving them to another place. It follows from this principle that it is worth minimizing the use of compound selectors (for example, of the type header pa ).
2. Use namespaces to minimize the likelihood of conflicting rules relating to different elements. This leads to long names, but eliminates a lot of problems in the future.

So, what possibilities do we have now for binding styles to elements? Any element has the following characteristics:

1. Element name
2. Identifier
3. Class set
4. Attribute Set
5. Property set

Let's look at how we can use them, for example, a simple task list containing cards with the name of the task and an estimate of the time it was completed ...

Element name

 <my-task-list> <my-task-card> <my-task-card-title>Write HTML</my-task-card-title> <my-task-card-estimate>1 hour</my-task-card-estimate> </my-task-card> <my-task-card> <my-task-card-title>Write CSS</my-task-card-title> <my-task-card-estimate>2 hours</my-task-card-estimate> </my-task-card> <my-task-card> <my-task-card-title>Write JS</my-task-card-title> <my-task-card-estimate>10 hours</my-task-card-estimate> </my-task-card> </my-task-list> 

 my-task-list { display: flex; flex-direction: column; } my-task-card { display: inline-flex; margin: .5rem; padding: .5rem; border: 2px solid gray; border-radius: .5rem; } my-task-card-title { margin: .5rem; font-weight: bolder; flex: 1 1 auto; } my-task-card-estimate { margin: .5rem; font-weight: lighter; } 

http://liveweave.com/XjrwY5

As you can see, the CSS code is pretty simple, but the long tag names overload HTML. In addition, the names of elements are great for specifying the name of the block, but they do not at all allow the modifier to be added to the element (for example, to somehow highlight completed or important tasks). But the main problem with customized element names is that sometimes the name of an element must be strictly defined. For example, the video element to insert a video onto a page, or the a element to create a hyperlink.

This method of stylization is almost not used due to the mentioned limitations. Only newcomers and enthusiasts from web components practice this technique.

Identifiers

 <div id="my-task-list"> <a id="my-task-card" href="#task=1"> <div id="my-task-card-title">Write HTML</div> <div id="my-task-card-estimate">1 hour</div> </a> <a id="my-task-card" href="#task=2"> <div id="my-task-card-title">Write CSS</div> <div id="my-task-card-estimate">2 hours</div> </a> <a id="my-task-card" href="#task=3"> <div id="my-task-card-title">Write JS</div> <div id="my-task-card-estimate">10 hours</div> </a> </div> 

 #my-task-list { display: flex; flex-direction: column; } #my-task-card { display: inline-flex; margin: .5rem; padding: .5rem; border: 2px solid gray; border-radius: .5rem; text-decoration: inherit; color: inherit; } #my-task-card-title { margin: .5rem; font-weight: bolder; flex: 1 1 auto; } #my-task-card-estimate { margin: .5rem; font-weight: lighter; } 

http://liveweave.com/ccrFOf

The CSS code hasn't changed much - we just added grids in front of the names. HTML code has become much easier due to the lack of repetition of long names. Tag names can now be arbitrary, so we easily turned task cards into hyperlinks leading to pages with details on these tasks. However, we still have no support for modifiers. And besides, it’s not ideologically true to have several elements on the same page with the same identifier, although this does not break anything.

Previously, identifiers were popular for styling, but now classes have completely supplanted them.

Classes

 <div class="my-task-list"> <a class="my-task-card my-task-card_important my-task-card_completed" href="#task=1"> <div class="my-task-card-title">Write HTML</div> <div class="my-task-card-estimate">1 hour</div> </a> <a class="my-task-card my-task-card_completed" href="#task=1"> <div class="my-task-card-title">Write CSS</div> <div class="my-task-card-estimate">2 hours</div> </a> <a class="my-task-card" href="#task=1"> <div class="my-task-card-title">Write JS</div> <div class="my-task-card-estimate">10 hours</div> </a> </div> 

 .my-task-list { display: flex; flex-direction: column; } .my-task-card { display: inline-flex; margin: .5rem; padding: .5rem; border: 2px solid gray; border-radius: .5rem; text-decoration: inherit; color: inherit; } .my-task-card_important { border-color: red; } .my-task-card_completed { opacity: .5; } .my-task-card-title { margin: .5rem; font-weight: bolder; flex: 1 1 auto; } .my-task-card-estimate { margin: .5rem; font-weight: lighter; } 

http://liveweave.com/qZDyzV

Changes in both CSS and HTML are minor, but there are much more than one class on one element, which we took advantage of, having additionally painted important and completed tasks. True, due to namespaces, such modifiers inflate HTML quite a bit.

99% of the code is now written on the web on classes, however there is a better solution ..

Attributes

 <div my-task-list> <a my-task-card="important completed" href="#task=1"> <div my-task-card-title>Write HTML</div> <div my-task-card-estimate>1 hour</div> </a> <a my-task-card="completed" href="#task=2"> <div my-task-card-title>Write CSS</div> <div my-task-card-estimate>2 hours</div> </a> <a my-task-card href="#task=3"> <div my-task-card-title>Write JS</div> <div my-task-card-estimate>10 hours</div> </a> </div> 

 [my-task-list] { display: flex; flex-direction: column; } [my-task-card] { display: inline-flex; margin: .5rem; padding: .5rem; border: 2px solid gray; border-radius: .5rem; text-decoration: none; color: inherit; } [my-task-card~=important] { border-color: red; } [my-task-card~=completed] { opacity: .5; } [my-task-card-title] { margin: .5rem; font-weight: bolder; flex: 1 1 auto; } [my-task-card-estimate] { margin: .5rem; font-weight: lighter; } 

http://liveweave.com/8ddncZ

The CSS code has become slightly more complicated, but HTML, in spite of the support for modifiers, has become much simpler. Here we use a special selector, which literally means "to apply such and such styles to an element that has such and such an attribute in such an attribute, among the words separated by a space.

Despite all its advantages, attributes have not yet gained popularity. But it is only a matter of time - css-frameworks are already beginning to appear, actively using this technique.

Properties

Browsers present a rather limited set of properties that we can use in CSS through pseudo-classes . For example, we can add a highlight of the card when you hover the cursor:

 [my-task-card]:hover { border-color: steelblue; box-shadow: 0 0 .5rem rgba(0,0,255,.25); opacity: 1; } 

Unfortunately, the set of pseudo-classes does not depend on us at all, so if, for example, we need to allocate a card for the current open problem, then we will have to use the modifier:

 [my-task-card]:not([my-task-card~=current]):hover { border-color: steelblue; box-shadow: 0 0 .5rem rgba(0,0,255,.25); opacity: 1; } [my-task-card~=current] { background: #eee; border: none; } 

It turned out quite cunning logic and it is still flowers - in some cases, there are furious expressions. In addition, during development we cannot display the card in all possible states - we have to open the page and haul it with the mouse, checking that everything works as it should. Therefore, if there is such an opportunity, then it is better not to use pseudo-classes at all in favor of modifiers controlled from JS:

 [my-task-card~=hover] { border-color: steelblue; box-shadow: 0 0 .5rem rgba(0,0,255,.25); opacity: 1; } [my-task-card~=current] { background: #eee; border: none; } 

 <div my-task-list> <a my-task-card="important completed" href="#task=1"> <div my-task-card-title>Write HTML</div> <div my-task-card-estimate>1 hour</div> </a> <a my-task-card="completed" href="#task=2"> <div my-task-card-title>Write CSS</div> <div my-task-card-estimate>2 hours</div> </a> <a my-task-card="current" href="#task=3"> <div my-task-card-title>Write JS</div> <div my-task-card-estimate>10 hours</div> </a> </div> <div my-task-list> <a my-task-card="hover important completed" href="#task=1"> <div my-task-card-title>Write HTML</div> <div my-task-card-estimate>1 hour</div> </a> <a my-task-card="hover completed" href="#task=2"> <div my-task-card-title>Write CSS</div> <div my-task-card-estimate>2 hours</div> </a> </div> 

http://liveweave.com/1GJrUM

Here we brought out the task cards in all possible states, so that with one glance we can easily take them all. How to write JS, which will change the modifiers according to the necessary logic - a separate question and depends largely on your preferred framework.

This concludes our short review of styling techniques. Tell us in the comments, what principles do you adhere to in the layout and how would you finish up the example described in the article.