whizark

HTML/CSS Class Naming Convention

A HTML/CSS Class Naming Convention for Scalable/Modular CSS.

ToC

• Basics
• Phrase and Compound Word
• Plural and Collection
• Variant

whizark

Sass Naming Convention

A Sass Naming Convention for Sass libraries.

ToC

• Basics
• Phrase and Compound Word
• Namespace
• Private Variable/Function/Mixin

whizark

<!-- .list is an aggregation of .li -->
<ul class="list">
  <li class="list--li li">Item</li>
</ul>

<!-- .list is a composition of .list--li -->
<ul class="list">
  <li class="list--li">Item</li>
</ul>

whizark

<div class="warning">
  <p>A Warning Message.</p>
</div>

whizark

// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----

// Sass: Creating custom scope & scope-based default value in Sass
//
// A use case using mixin.
// This is pseudo code so you need implement some code.
//

whizark

Keybase proof

I hereby claim:

• I am whizark on github.
• I am whizark (https://keybase.io/whizark) on keybase.
• I have a public key ASBPz9RqQK6B7fji2mXHl7t6WYCUSwfm5z-ZMBJNSmDr6Qo

To claim this, I am signing this object:

whizark

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// Sass: Generating decoupled color schemes

// Helper functions
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);

whizark

<div class="app">
  <div class="app--note note">
    <ul class="note--list list">
      <li class="list--li li" data-state="active">Item</li>
    </ul>
  </div>
</div>

whizark

WordPress: Best Practices

This is my best practices for WordPress but it is also the one FOR MOST OF THE WORDPRESSS DESIGNERS/DEVELOPERS. Some of these practices are useful to check code quality of themes/plugins.

Follow PSR

You may/should break away from WordPress Coding Standards and follow PSR if you are not a core/core-plugin developer (If you haven't followed either of WordPress Conding Standards or PSR, it is a bad habit) .

Why

whizark

<div class="app">
  <!--
  An element should know only its own child elements,
  child elements should not know the parent element.
  (at least, in HTML)
  Therefore, well-structured element has ONLY 1-2 class(es).
  -->
  <div class="app--note note">
    <ul class="note--list list">
      <li class="list--li li">Item</li>