itcss.io

csswizardry.com

The real HTML5 boilerplate – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2011/01/the-real-html5-boilerplate

6 January, 2011. The real HTML5 boilerplate. There has been a lot of talk lately about a certain 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 additions being made (note. I won’t beat about the bush, seeing the HTML5 Boilerplate makes me frustrated. It makes me wish I were a vet, or a tree surgeon, or something that isn’t a web developer. Look at all that code. 681* lines. Six hundred and eighty-one.

csswizardry.com

BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further

5 August, 2015. BEMIT: Taking the BEM Naming Convention a Step Further. Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different naming convention to BEM, but an augmentation: small additions that level BEM up a notch. This extended BEM syntax has been dubbed BEMIT. BEM ITCSS = BEMIT. The sole root of the component. A component part of the Block. But a...

csswizardry.com

More Transparent UI Code with Namespaces – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces

6 March, 2015. More Transparent UI Code with Namespaces. When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features. This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not. A lot of times, I’m willing to bet. Naming conventions like BEM. The top-level ‘Block’ ...

csswizardry.com

Can CSS Be Too Modular? – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2015/03/can-css-be-too-modular

8 March, 2015. Can CSS Be Too Modular? I frequently get asked questions along the lines of. Can CSS be too modular? I recently got asked about this in an email, which I’ve published below:. For example, I created a simple object called. Became an atom called. Pa- xs { padding: 6px; } .pa- s { padding: 12px; } .pa- m { padding: 24px; } .pa-l { padding: 36px; } .pa- xl { padding: 48px; }. Now it could be applied to any element and is not bound to any particular object. I read a fantastic article on Smashin...

csswizardry.com

Madgex – Consultancy and workshop – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/case-studies/madgex-consultancy-workshop

Madgex Consultancy and workshop. Nik White, Madgex. S Design Director, got in touch with me about going down to Brighton to meet her team, and to run a workshop-style day to help them get a better handle on their product’s UI codebase as it went through a fairly large transition: a decade-old product that they had recently re-designed and -developed to be responsive. Sharing components across that number of white-labelled products. Safely propagating changes to those components. Madgex needed a way to ef...

csswizardry.com

Home – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/page2

Front-end Architecture and Performance Engineering. I provide CSS and performance consultancy to companies of all sizes across the globe. From advice on how to work better as a team, to how to scale a large codebase; how to rationalise the design process, to how to write better quality responsive UIs. Harry helped our team level up their scalable CSS architecture skills, and to say that he had a large impact on our work is an understatement. We can’t recommend him enough. 26 April, 2015. 11 March, 2015.

csswizardry.com

Travelling Like You Want to, When You Have To – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2015/06/travelling-like-you-want-to-when-you-have-to

21 June, 2015. Travelling Like You Want to, When You Have To. I’m not the world’s most well travelled person by any stretch of the imagination, but especially since working for myself I’ve done more than my fair share of flying. I enjoy going to new places, but I really don’t enjoy the getting there. Flights are an expensive, uncomfortable, time-consuming, necessary evil, so I’ve spent a lot of time trying to make them as painless as possible. I thought I’d share some of my own flying advice. By checking...

csswizardry.com

About me – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/about

Hi there, I’m Harry; I am an award-winning. Consultant Front-end Architect, writer, and speaker from the UK. I help companies all over the world write better quality, more manageable, more scalable user interfaces. I am available for work. On stage at beyond tellerrand. A Google Developer Expert. And named Young Developer of the Year. Magazine, I was previously a Senior Developer at BSkyB. I have consulted internationally with clients including the United Nations. And the Financial Times. If you think yo...

chaihongjun.me

如何书写整洁的 CSS 代码？只需十步！_chaihongjun.me|柴宏俊博客

http://chaihongjun.me/html_css/css/156.html

如何书写整洁的 CSS 代码 只需十步. 如何书写整洁的 CSS 代码 只需十步. 来源 https:/ github.com/xitu/gold-m. 你知道如何写出易维护的整洁的 CSS 代码吗 要想写出易读易理解易维护的 CSS 代码，你只需掌握一些简单的方法就够了 今天你将会学习其中五个，我们将会讨论文件结构，混合的 CSS 和 JavaScript 及其劣势，还有如何更好地给 CSS 添加前缀以及自动执行，最后我们将学习如何处理技术债务。 No3: 验证 CSS 代码. No4: 使用 CSS 代码 linter. No5: 采用模块化的 CSS 代码. 在这个只有两部分的迷你系列的文章中，我仅仅是展示给你们写出整洁的 CSS 代码的 10 个简单的方法而已。 你考虑过该如何创建 CSS 类和 ID 请尽量避免 ID 吗 我不是指一闪而过的念头，而是花费若干时间来深度思考。 为什么要这样做呢 这会让你的 CSS 代码变得更具可读性。 理解了 CSS 代码，你就能更高效地书写和使用它，也更容易写出整洁的 CSS 代码，过程也就不会那么痛苦了。 No3: 验证 CSS 代码. 为什么要这样呢 如我...

csswizardry.com

Pure CSS(3) accordion – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2011/02/pure-css3-accordion

17 February, 2011. I tend to do a lot of tinkering with code, and came up with something that’s not so new, but still, in my opinion, pretty cool. An accordion using nothing but semantic HTML, CSS and some nice progressive CSS3. There are also two versions, a horizontal one and a vertical one. This article has been ported from the now-defunct Venturelab Devblog, where I had originally authored it. ACCORDION *- - - - - - - - - - - - - - - - - - */. It’s all fairly self-explanatory; first we have the.