- use the new HTML5 Elements like section, article, nav, header, footer, etc
- when these are not applicable use mostly div and span
- the above two rules combined with CSS3 Flexbox / Grid module makes a perfect match
- HTML is semantic when it is outlined well: https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fits-csongor.com%2F
- makes websites accessible for larger audiences than usual (people with sensory defects)
- makes websites more easy to interact with (via various input devices, even voice control)
- makes websites understandable for non-humans like bots and programs
- driven by WebAIM and WCAG2.0 http://webaim.org/standards/wcag/checklist, verified by WAVE http://wave.webaim.org/
- the report for largest project done by me: http://wave.webaim.org/report#/www.smuff.ro
- the most difficult is to organize CSS files into an intuitive structure, understandable for a team, easily modifiable/extendable by anyone
- for that I'm using the Atomic/Component model by Brad Frost http://demo.patternlab.io/ which builds UI systems bottom-up starting with Atoms > Molecules > Organisms > Structures > Pages
- each of these layers share another orthogonal semantic layer like Grid, Typography, Decorations, etc
- within this matrix locating a component is immediate and straightforward
| Atoms | Molecules | Organisms | Structures | Pages |
|---|---|---|---|---|
| Grid | Grid | |||
| Typography | Typography | Typography | ||
| Decorations | Decorations | Decorations | ||
| Navigation | Navigation | |||
| Article | Article |
- If concerns are separated (HTML stays for structure, CSS for style) then less #id and .class rules are used making CSS fast
- HTML5 and SCSS makes this separation intuitive. https://signalvnoise.com/posts/3003-css-taking-control-of-the-cascade
- If different pages use very different styles then create separate .css files for every page, do not mix them into a single large file
- Use UnCSS: this is automatically removes unused declarations
- Compress CSS and zip it on delivery, make it cacheable
- the best practice is to have a styleguide repository / component API which drives all distribution platforms (web, email, app)
- there is an open source Rails based solution created by the Lonely Planet: https://github.com/lonelyplanet/rizzo with this result: http://rizzo.lonelyplanet.com/styleguide/ui-components/cards
- My primary language is Ruby then PHP then Javascript
- I've used Javascript through jQuery in every project done since 2005
- Lately I've switched from Ruby/Jekyll to Gulp and started to re-learn Javascript
- The Eloquent Javascript book made me love this language, the Underscore.js library gives me more power than thought before
- I'm fascinated by the Node.js philosophy: do one very small thing but do it best | then pipe together with other small things
- I'm working with SASS/SCSS since v0.0.1
- I use Compass(Ruby gem) for cross browser compatibility, lately playing with Autoprefixer (Node.js module)
- I have my own component library built with SCSS and using the Atomic Web Design model
- I'm using it since the first version
- Now v2.0 out I tend to use the simplest form (source/srcset) which satisfies all my needs: https://github.com/metamn/cs3-v1/blob/master/_includes/atoms/figure.html
- I'm using Icomoon's SVG font generator for SVG icons. This way icons stay connected automatically with the CSS (color, size, etc.)
- As a web dev I see lots of potential in SVG reducing page weight, as a designer I'm using it for magazine/print - like solutions
- Working with Rails between 2005-2009 on the full MVC stack. Using ERB for views.
- Since then working with Ruby/Jekyll and Liquid for views
- I've tried almost every templating language during different projects from Mustache to Swig.
- I like the embedded approach maybe more than the logic-less views.