Feb 28, 2015

HTML & CSS naming convention – a modern approach

 

Excerpts original from Stackoverflow


First, if you are not aware of this common (good?) practice: avoid IDs as styling hooks, try to only use Classes

Because:

  • only very few blocks (ie. page-header, page-footer) can 100% garantee the fact that they will not be reused elsewhere

  • you want to keep specificity low, there will always be times you need to override it (without using an extra ID selector or !important)


Common requirements/conventions:
  • Names should be intuitive/meaningfull
  • Do NOT abbreviate names unless its a really well known abbreviation (ie. msg for Message, accnt for account)
  • Use known/common names: .site-nav, .aside-nav, .global-head, .btn-primary, .btn-secondary
  • Allow structural hierarchy (ie. BEM convention)
  • Use - or _ in namings: probably subjective (devs' opinions) & depending on the keyboard languages used. Note that camelCase has been left aside for browser-compatibility issues I believe, although I never found a proof for this.
  • Never use elements in selectors unless exceptional case: this allows for more flexibility, ie. you have buttons you created using <input type="button"></input> and you want to switch to using <button></button>, if you used element types in some selectors then you can plan some annoying/time-consuming refactoring/testing/prod-bug-fixing, whereas if you use element-less selectors then the switch will be infinitely easier. SMACCS also has it in its conventions
  • For states, try to match known conventions from other languages (php, java, c#): ie, use "is-active", "is-badass", & so on
  • Name from left-to-right: from the most generic to the most precise, ie. btn-bluetheme-create-accnt or accordion-modrnlook-userlist
  • a class or id name should always be specific enough to be searched across a whole project & return only the relevant results
  • Prefer direct descendant if you use descendent selectors - use .module-name > .sub-module-name vs .module-name .sub-module-name - you'll save yourself some headache in the future (simpler CSS but also more performant, although the term "CSS performance might be laughable")

As discussed below you may want to consider using Structural naming convention OR/AND Presentational naming convention (or skins). I'd prefer the structural one overall but then there always are cases where it's needed (ie. using different button styles on 1 website is not unusual & it might be handy/tempting to name them such as btn-dark & btn-light).


Known conventions:

Structural naming convention: name element's class by describing what it is, rather than where it is or how it looks. See examples below.

.page-container
.page-wrap-header-n-content
.page-header
.branding-logo
.branding-tagline
.wrapper-search
.page-nav-main
.page-main-content
.page-secondary-content
.nav-supplementary
.page-footer
.site-info

Presentational naming convention: name element's class by describing its location and/or appearance. See examples below.

.theme-ocean-blue
.skin-red-tango

BEM naming convention: stands for "Block, Element, Modifier". Syntax is such as <module-name>__<sub-module-name>--<modifier-or-state>. Block is a the "main" container, a kind of module/component whatever you call it. Element is just a child component of the main component (the Block). Modifier is some kind of state. Peculiarities: the syntax (usage of dbl underscore & dbl dash), & child elements must contain their closest component's name. See examples below.

.nav-primary
.nav-primary__list
.nav-primary__item
.nav-primary__link
.nav-primary__link--is-active

.grid
.grid__item
.grid__description
.grid__img-wrap
.grid__img

.global-footer
.global-footer__col
.global-footer__header
.global-footer__link

OCSS naming convention: stands for Object Oriented CSS. Uses skins for branding purposes or consistency of design (ie. bg color, border color, ...). Abstracts the structural styles. Example of abstract structural style below.

 .global-width {
min-width: 780px; /* minimum width */
max-width: 1400px; /* maximum width */
margin: 0 auto; /* Centering using margin: auto */
position: relative; /* Relative positioning to create a positioning context for child elements */
padding-left: 20px;
padding-right: 20px;
overflow: hidden; /* Overflow set to "hidden" for clearfixing */
}




Some CSS guidelines:

There has been a "trend" to share your CSS styleguide, here are a few you can read to pick & choose whatever seems to fit for your need (naming convention but also much more, this may be out of scope of your question):





Resources:

Feb 27, 2015

How to prioritize LAN connection over Wifi (Windows)

 

On Windows, want to use LAN speedy connection while still connected to wireless ? It’s easy. Here’s how:

1. Open Control Panel –> Network and Internet –> Network Connections

2. In the menu, choose Advanced –> Advanced Settings

image

3. Use the arrow to move your Local Area Connection to the top. As it’s said: the connections are listed in order which they are accessed by network services.

image

4. Time to test: I tried copy some files over the network while connected to wi-fi. It works, LAN is used and the speed is much better. Tada !!!

image

Feb 22, 2015

Hardware hack - how to make your mouse more quiet

 

Ever feel annoyed by the clicking sound of your mouse, especially at night ? I do. So I just purchase this great Logitech M325 wireless mouse – it has ergonomic build, with contour curve and striped grip that fit nicely on my palm. But the clicking sound is just too much.

OK, my hardware senses are tingling. Let’s find out how to make this mouse more quiet.

Step 1: Open the case

The Logitech wireless mouse M325 is a little bit different from the rest. To open it, you got to remove the battery and the battery label beneath. Then you’ll see a little hidden screw. Remove it

IMG_5708_resize

Step 2: Open the click latch

Once you open up your mouse, look for the click latch. Use a penknife, gentle open the latch.
My tips: put the mouse on a black surface. The little white latch on top is very small and it may fly off.

image

Step 3: Adjust the latch:

Once the latch is opened, you’ll see the latch and the copper switch. Use your knife, put a little pressure to tilt the latch and see if the noise is as quiet as you want. You can use a pen to press on the switch to test.

Before:

image

After:

image

That’s it. Now just reassemble everything and enjoy your quiet mouse. Man I could barely hear myself clicking Smile !

Feb 13, 2015

How to reset applicationhost.config in IIS

 

Sometime your IIS setting may be corrupted. So you want to reset everything to factory settings.

Here are the steps:

1. In PowerShell, run these commands:

· Get-WindowsFeature

· Uninstall-WindowsFeature Web-Server

· Uninstall-WindowsFeature WAS

2. Using Server Manager: reinstall Web Server (IIS)

3. Open IIS Manager, the applicationhost.config file should be autogenerated.

Reference: http://blogs.msdn.com/b/chaun/archive/2010/05/26/iis7-x-a-common-mistake-when-reinstalling-iis-7-x-errors-0x80070490-and-0x80070002.aspx