はてなブックマーク

17 July, 2014 Hacks for dealing with specificity Written by Harry Roberts on CSS Wizardry. Table of Contents Low specificity IDs Featured case study: NHS Safely increasing specificity As we’re all probably well aware by now, specificity is one of the quickest ways to get yourself in a tangle when trying to scale a CSS project: even if you have the most considered source order, and your rulesets ca

23 June, 2014 Vim for People Who Think Things Like Vim Are Weird and Hard Written by Harry Roberts on CSS Wizardry. Table of Contents In the Beginning Featured case study: NHS Learn Your Text Editor Widely Available Customisable and Extensible Modes Very Literal Keyboard Shortcuts Highly Composable Very Minimal Further Reading Vimpressive! I’ve been quite an avid and exclusive user of Vim for a co

21 May, 2014 Grouping related classes in your markup Written by Harry Roberts on CSS Wizardry. Table of Contents How it works Scanning your code Featured case study: NHS Vim Validity Errors Extra bytes Teams JavaScript To use, or not to use? N.B. 2016-02-23 I no longer advise this technique—it proved far too problematic on teams where people we unfamiliar with the syntax. If you do wish to clearly

beautons – a beautifully simple button toolkit Follow @csswizardry Download or View on GitHub Button Class Description Basic Button .btn Plain ol’ regular button. Sizes Button .btn .btn--small Smaller-than-normal button. Button .btn .btn--large Large button. Button .btn .btn--huge Huge button. Button .btn .btn--full Full-width button. Font sizes Button .btn .btn--alpha Huge text button. Button .bt

26 March, 2014 Naming UI components in OOCSS Written by Harry Roberts on CSS Wizardry. Table of Contents Using Sass’ @extend Featured case study: NHS data-* attributes One of the biggest—if not most common—complaints about OOCSS is its use of ‘insemantic classes’. Unfortunately, the idea that classes are semantic (in the HTML sense of the term) is something of a fallacy; classes aren’t understood

28 May, 2013 Hashed classes in CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS I gave a talk at Beyond Tellerrand yesterday in which I shared some advice concerning the use of IDs in CSS, something which I vehemently recommend you avoid. Vitaly, who was in the audience, tweeted a snippet of the advice which was, unfortunately, a little out of context. I got

22 May, 2013 ‘Scope’ in CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Global scope Featured case study: NHS Loose selectors Scope in CSS Nesting? No nesting! BEM Scope all the things? In summary One thing you will no doubt be familiar with, as a web developer, is the idea of scope. Wikipedia’s introduction to the subject: In computer programming, a scope is the context within a c

25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand

17 April, 2013 shame.css Written by Harry Roberts on CSS Wizardry. Table of Contents The problem The solution Featured case study: NHS Not a blame game The rules Example Implementation Keep track of your hacks! Update: I did a short interview about shame.css with .net magazine. Something Chris Coyier, Dave Rupert and I joked about recently was the idea of a stylesheet dedicated to housing your nas

csswizardry-grids is a fully responsive, mobile-first, infinitely nestable, reversible, reorderable, simple to understand, human-friendly, robust grid system. View on GitHub Tweet Follow @csswizardry The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and

20 January, 2013 Front-end performance for web designers and front-end developers Written by Harry Roberts on CSS Wizardry. Table of Contents The basics Styles at the top, scripts at the bottom Featured case study: NHS Make fewer requests Maximising parallelisation HTTP requests and DNS lookups DNS prefetching Further reading Resource prefetching Further reading CSS and performance Further reading

20 November, 2012 Code smells in CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Undoing styles Magic numbers Qualified selectors Hard-coded/absolute values Brute forcing Dangerous selectors Reactive !important IDs Loose class names Final word Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optiona

12 June, 2012 Single-direction margin declarations Written by Harry Roberts on CSS Wizardry. Table of Contents Defining vertical rhythm Confidence in portability Less to think about Exceptions Breaking the rule Final word This morning I awoke to find Smashing Magazine had retweeted a tweet I made two months ago about how you should always try and apply margins in one direction only. This, like mos

15 May, 2012 Keep your CSS selectors short Written by Harry Roberts on CSS Wizardry. Table of Contents Increases Selector Efficiency Reduces Location Dependency Increases Portability Reduces Chances of Selector Breakage Decreases Specificity Can Make Code More Forgiving Final Word One thing I believe, as a very, very general rule of thumb, is that as sites get bigger, selectors should get shorter.

28 April, 2012 The single responsibility principle applied to CSS Written by Harry Roberts on CSS Wizardry. Table of Contents When to use it? But! Having just spoken at the Front-Trends conference in Warsaw, I’ve decided to expand on something which my talk mentioned a lot: classes. My talk covered how to build big, scalable front-ends and one of the key factors involved in doing so is sensible an

20 April, 2012 My HTML/CSS coding style Written by Harry Roberts on CSS Wizardry. Table of Contents HTML Unquoted attributes No self closing tags Optional closing tags Whitespace Comments on closing tags Namespaced fragment identifiers CSS No IDs Table of contents Section titles The shared section Formatting Vendor prefixes Indenting rulesets HTML in CSS Final word N.B. This post is almost complet

29 February, 2012 Pragmatic, practical font sizing in CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Double-stranded heading hierarchy Extending this? Preset font sizes Non-standard font-sizing Going the other way? Addendum Vertical rhythm Bringing it together Where does that leave us? One thing I’ve been thinking a lot about lately is how to build sites properly. Not what we have

11 December, 2011 On HTML and CSS best practices Written by Harry Roberts on CSS Wizardry. Table of Contents Further reading Best practices are exactly that; best. Not ‘better’, not ‘good when…’ or ‘best if…’, just best. They’re always the best, no matter what. This is something I learned whilst undertaking the single biggest project of my career so far; the complete (and not-yet-live) rebuild of

31 October, 2011 Fully fluid, responsive CSS carousel Written by Harry Roberts on CSS Wizardry. Table of Contents Demo The fluidity CSS powered Update Wait, CSS?! If you follow me on Twitter you’ll know I’ve been pretty enthused about this fluid CSS carousel of mine. There are two aspects to it; the fluidity and the CSS functionality. Demo The demo features photos of me, taken on various mountains

17 September, 2011 Writing efficient CSS selectors Written by Harry Roberts on CSS Wizardry. Table of Contents CSS selectors Combining selectors The key selector Overqualifying selectors Is all this really necessary? But More on CSS selector efficiency Efficient CSS is not a new topic, nor one that I really need to cover, but it’s something I’m really interested in and have been keeping an eye on

16 July, 2011 Responsive images right now Written by Harry Roberts on CSS Wizardry. Table of Contents Demo Bonus Responsive design is everywhere; everyone’s at it because, well, it’s a great idea. It isn’t without its problems, however… One of the more persistent issues is dealing with images. Resizing an image down to fit a smaller screen does work, but it’s a massive performance hit if your user

3 June, 2011 Annotated <figure>s in HTML5 and CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Demo The code The HTML The CSS A couple of things to note I’ve never really been one for CSS experiments. They’re cool and all, but I prefer solving real problems with good ol’ CSS and markup. This is what this next thing was born from and I’m really pleased with the outcome! It’s image ma

18 May, 2011 On negative hovers Written by Harry Roberts on CSS Wizardry. Table of Contents Spot the odd one out Underlines are obtrusive Intuition The answer? Issues Final word I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them. At their most basic a negative hover is a link whose appearance is subtracted fr

Another CSS framework?! Yup, ’fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file. inuit.css keywords Progressive Flexible Mobile Tablet Sensible Extensible Accessible Pragmatic Functional Useful Production-ready More What does it do? Mobile & tablet… inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such

14 March, 2011 Coding up a semantic, lean timeline Written by Harry Roberts on CSS Wizardry. Table of Contents The markup The CSS The spine The arrow and dot The branches Odd/even styling CSS feature detection? Final word I absolutely love coding up the more semantic aspects of a build. Usually forms and tables, it’s these massively semantic (read; lots of elements with very specific jobs) that I

6 January, 2011 The real HTML5 boilerplate Written by Harry Roberts on CSS Wizardry. Table of Contents Assumptions Gone to our heads? The real HTML5 boilerplate Addendum Update There has been a lot of talk lately about a certain HTML5 boilerplate… the HTML5 Boilerplate. A boilerplate is a starting point, it’s a base. It’s a codebase from which things are built with only the necessary and relevant

This is an example heading… Return to article. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,