.item-form
or data-item-id
..error
instead of .red
, or .main-menu.
instead of .top-menu
.strong
may be used to highlight something important, but not just to make the text bold. Tags, that have no semantic value, such as font
or br
, should not be used at all.font
or br
, but CSS.
<div class="widget"> <div class="header"></div> <div class="body"></div> </div>
/* correct */ .widget { ... } .widget .header { ... } .widget .body a { ... } /* wrong */ .widget { ... } .header { ... } .body a { ... } /* also wrong */ .widget { ... } .widget-header { ... } .widget-body a { ... }
.button { ... } a:visited { ... }
/* some special styles for a widget on the trigger monitoring page */ .w.list.trigger-mon .widget .body { ... } /* different .button styles for forms */ .w.edit .button { ... }
/* correct */ .w.list .item .status strong { ... } /* wrong */ .w.list tr.item td.status strong { ... }
style
attribute.
/* some common input and button styles */ input { ... } .button { ... } /* input and button styles inside of object configuration forms */ .w.edit input { ... } .w.edit .button { ... } /* specific styles for the item configuration form */ .w.edit.item-edit input { ... } .w.edit.item-edit .button { ... }
top
, right
, bottom
, left
.
.my-block { @include my-mixin; // Positioning position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; // Box Model box-sizing: border-box; display: block; width: 100px; height: 100px; padding-top: 10px; padding-bottom: 10px; margin: 10px; overflow: hidden; // Typography font-family: 'Times New Roman', serif; font-size: 1rem; font-style: italic; font-weight: bold; line-height: 1.5; color: #000; text-align: center; text-decoration: underline; text-shadow: 0 1px 0 #fff; text-transform: uppercase; // Accessibility & Interaction cursor: pointer; // Background & Borders background: #aaa; border: 10px solid #000; box-shadow: 0 0 10px #000; // Transitions & Animations transition: all 100ms ease; &::before { ... } &:hover { ... } &.my-modifier { ... } &.my-element { ... } }