Conventional Order of CSS Properties

Conventional Order of CSS properties

There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.

What order should you put CSS properties in?

Though there is no standard around it.
And probably that's how a declarative DSL should be.

The following links might give you an idea on how you can form a standard for your domain

• Conventional Order of CSS properties
• CSS Lisible
• CSS Comb
• Order Your CSS Properties

CSS Box Model Attribute Ordering Convention

Box Model Convention copied from http://fordinteractive.com/tools/propertyorder/propertyorder.css.

Additions should be edited in when they are found to be missing from the list. Please comment on where you think that additions and wait for some agreement before adding them to the final list.

display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;

outline: ;

list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;

opacity: ;

cursor: ;

content: ;
quotes: ;

• Where should clip go?
• Where should user-select go? (not supported except by Mozilla with -moz-user-select and Chrome with -webkit-user-select. IE uses JavaScript onselectstart)
• Where should border-radius go? (not supported except by Mozilla with -moz-border-radius and Chrome with -webkit-border-radius)

Please comment if you have a suggestion as to where something should go.

What's the correct order to load fonts in?

There is no “correct order”, and it’s not a loading order but a list from which each browser is expected to pick up one font resource to load – namely this first one they support (and it works that way).

EOT comes first because it is the only one that old versions of IE support, but its position is really not important.

WOFF is generally said to the optimal for web fonts. Whether that is true may depend on opinions, rendering routines, and fonts, but it’s anyway the conventional wisdom behind the order

TTF and SVG are listed last because some browsers support only such formats. If they were placed earlier, those formats might get used by some browsers that support WOFF as well.

Cypress: access custom defined css property

--chakra-scale-y is a css variable, which will be applied (probably as a transform) by the browser css engine.

Take a look in the devtools Computed tab (unselect Show all to see just those applied). If a transform shows up, this is what you need to test for.

In the test use getComputedStyle to check the value identified above.

cy.get('MY_ELEMENT')
  .then($el => {
    const win = cy.state('window')
    const styles = win.getComputedStyle($el[0])
    const transform = styles.getPropertyValue('transform')
    console.log(transform)
    expect(transform).to.eq(...)
  })

---

It looks like you need to check scaleY, this is from the chakra library

const transformTemplate = [
  "rotate(var(--chakra-rotate, 0))",
  "scaleX(var(--chakra-scale-x, 1))",
  "scaleY(var(--chakra-scale-y, 1))",
  "skewX(var(--chakra-skew-x, 0))",
  "skewY(var(--chakra-skew-y, 0))",
]

CSS class naming convention

The direct answer to the question is right below this one, by Curt.

If you're interested in CSS class naming conventions I suggest to consider one very useful convention named BEM (Block, Element, Modifier).

UPDATE

Please read more about it here - http://getbem.com/naming/ - that's a newer version that renders the following answer obsolete.

---

Main principles:

• A page is constructed from independent Blocks. Block is an HTML element which class name has a "b-" prefix, such as "b-page" or "b-login-block" or "b-controls".

• All CSS selectors are based on blocks. There shouldn't be any selectors that aren't started with "b-".

Good:

.b-controls .super-control { ... }

Bad:

.super-control { ... }

• If you need another block (on the another page maybe) that is similar to block you already have, you should add a modifier to your block instead of creating a new one.

Example:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

With modifier:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Then you can specify any modifications in CSS:

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

If you have any questions I'd be pleased to discuss it with you. I've been using BEM for two years and I claim that this is the best convention I've ever met.

Is there a previous sibling selector?

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

---

Related Topics