use long, descriptive class and id names rather than shorter obscure classes
keep all classes and id’s lowercase and separate words by dashes
keep scss from getting too narrow of scope with too much nesting
keep similar structures on different pages using the same markup and classes whenever possible.
Use h1, h2, h3 tags consistently on different pages
Don’t target elements using already existing classes that are being used for other reasons and might need to be changed. Add new classes to elements that need to be selected.
PHP
keep variables semantic, lowercase and separate words with underscores
use a prefix specific to the project in variable names to keep there from being collisions with the theme, WordPress or plugins.
in this case ‘gr_’
function names should be prefixed with something specific for the theme. It will make is easier or avoid name collisions and make custom functions easier to spot in the code.
in this case ‘gadget_’
move any reused or really complicated chunks of code to functions.php settings for functions should be passed to by function argument rather than global variables.
check functions.php for already existing functions that perform the same task.
only edit the scss files for css changes. Don’t use custom css plugins during development. Others developing locally won’t have that css available.
If two pages have structures that are the same, we should move that markup to reusable template parts and then included in all the needed pages.
When including php files or referencing theme paths use get_stylesheet_directory_uri() rather than get_template_directory_uri()
use get_template_part() instead of php include() or require()
generating img markup.
use the alt=”” attribute as well as width and height. There are many javascript and WordPress plugins that rely on the width and height attribute in img tags.
Theme folder structure
Keep images, javascript and css in folders below.
I’m going to split up the style.css file into uncompressed components and compiled back in to style.css from the scss folder. So we need to edit or add any css in the style.scss included components
/images
/js
/css
/frameworks
/scss
If we need to extend the theme with any additional custom frameworks for metaboxes or theme option we should just use a /frameworks folder.
Theme coding guidlines
best practices
PHP
in this case ‘gr_’
in this case ‘gadget_’
generating img markup.
use the alt=”” attribute as well as width and height. There are many javascript and WordPress plugins that rely on the width and height attribute in img tags.
Theme folder structure
Keep images, javascript and css in folders below.
I’m going to split up the style.css file into uncompressed components and compiled back in to style.css from the scss folder. So we need to edit or add any css in the style.scss included components
/images
/js
/css
/frameworks
/scss
If we need to extend the theme with any additional custom frameworks for metaboxes or theme option we should just use a /frameworks folder.
http://isobar-idev.github.io/code-standards/